js中document对象用法

合集下载

js document对象获取元素的方法

一、介绍JavaScript（简称JS）是一种脚本语言，被广泛应用于网页开发中。

在JS中，document对象是用来表示整个HTML或者XML文档的对象，它提供了操作文档的方法和属性。

在网页开发中，经常需要使用document对象来获取元素，从而进行相应的操作。

本文将介绍JS中document对象获取元素的方法。

二、getElementById方法1. document.getElementById()方法是通过元素的id属性来获取指定元素的引用。

2. 使用该方法，需要在HTML中指定相应元素的id属性。

3. 该方法的语法如下：var element = document.getElementById("id");其中，id为指定元素的id。

三、getElementsByClassName方法1. document.getElementsByClassName()方法是通过元素的class 属性来获取指定元素的引用。

2. 该方法会返回包含指定类名的所有元素的集合。

3. 该方法的语法如下：var elements =document.getElementsByClassName("classname");其中，classname为指定元素的class名称。

四、getElementsByTagName方法1. document.getElementsByTagName()方法是通过元素的标签名来获取指定元素的引用。

2. 该方法会返回包含指定标签名的所有元素的集合。

3. 该方法的语法如下：var elements =document.getElementsByTagName("tagname");其中，tagname为指定元素的标签名。

五、querySelector方法1. document.querySelector()方法是通过CSS选择器来获取指定元素的引用。

js中的document属性和方法

document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML
document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数
document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种类*/
图层对象的4个属性
document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出HTML
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。

jsdocument方法

jsdocument方法js document(JavaScript Document)是JavaScript中的一个内置对象，它代表当前的网页文档。

在网页中，我们可以使用js document对象来访问和操作网页中的元素、样式、事件等。

本文将详细介绍js document的常用方法和用法。

一、js document的基本用法1. 获取元素js document提供了多种方法来获取网页中的元素，常用的方法有：- getElementById(id)：根据元素的id属性获取元素。

- getElementsByTagName(tagName)：根据元素的标签名获取元素集合。

- getElementsByClassName(className)：根据元素的class属性获取元素集合。

- querySelector(selector)：根据选择器获取匹配的第一个元素。

- querySelectorAll(selector)：根据选择器获取所有匹配的元素集合。

2. 修改元素内容和样式js document提供了一系列方法来修改元素的内容和样式，常用的方法有：- innerHTML：获取或设置元素的HTML内容。

- innerText：获取或设置元素的文本内容。

- style.property：获取或设置元素的样式属性。

3. 创建和插入元素js document可以通过createElement方法创建新的元素，然后使用appendChild方法将新元素插入到指定位置。

4. 添加事件监听器js document可以使用addEventListener方法为元素添加事件监听器，以响应用户的操作。

二、示例代码以下是一个使用js document的示例代码，用于实现点击按钮时改变文本内容的功能：```html<!DOCTYPE html><html><head><title>js document示例</title></head><body><button id="btn">点击我</button><p id="text">初始文本</p><script>// 获取按钮元素var btn = document.getElementById("btn");// 获取文本元素var text = document.getElementById("text");// 添加点击事件监听器btn.addEventListener("click", function() {// 修改文本内容text.innerHTML = "点击按钮后的文本";});</script></body></html>```以上代码中，通过getElementById方法获取到按钮和文本元素，然后使用addEventListener方法为按钮添加点击事件监听器。

document.createElement()的用法

4.e.type ="button";
5.e.value ="这是测试加载的小例子";
6.varobject = board.appendChild(e);
7.</script>
效果：在标签board中加载一个按钮，属性值为“这是测试加载的小例子”。
例2：
Js代码
1.<script type="text/javascript">
下面，举例说明document.createElement()的用法。<div id="board"></div>
例1：
Js代码
1.<script type="text/javascript">
2.varboard = document.getElementById("board");
3.vare = document.createElement("input");
document.createElement()的用法
document.createElement()是在对象中创建一个对象，要与appendChild()或insertBefore()方法联合使用。其中，appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。
2.var oTest = document.getElementById("test");
3.var refChild = document.getElementById("x1");

js document用法

js document用法JavaScript中的document对象是访问和操作HTML文档中元素的重要工具。

它提供了许多函数和方法，可以在网页中实现动态交互和操作。

document对象可以用来访问和获取HTML中的元素。

使用document对象的getElementById()方法，我们可以通过元素的id属性获取该元素的引用。

比如，通过调用document.getElementById("myElement")，我们可以获取id 为"myElement"的元素，并对其进行进一步操作。

除了通过id获取元素，我们还可以使用其他方法来选择元素。

例如，使用document.getElementsByClassName("myClass")可以获取具有指定类名的所有元素，并以数组的形式返回。

类似地，使用document.getElementsByTagName("div")可以获取指定标签名的所有元素。

一旦我们获取了元素的引用，就可以使用document对象的属性和方法来操作它们。

其中最常用的是innerHTML属性，它可以用来获取或设置元素的HTML内容。

通过将innerHTML属性设置为新的HTML代码，我们可以改变元素的显示内容。

另外，使用document对象的style属性，我们可以修改元素的样式，比如颜色、字体大小等。

除了操作元素，document对象还提供了一些其他有用的功能。

例如，使用document.title属性，我们可以获取或设置当前页面的标题。

使用document.location.href属性，可以获取当前网页的URL。

还可以使用document.createElement()方法来创建新的HTML元素，并将其添加到DOM 中。

JavaScript中的document对象是处理和操作HTML文档中元素的必备工具。

js document获取div的方法

js document获取div的方法JavaScript 是一种常用的编程语言，广泛应用于网页开发中。

在JavaScript 中，可以使用 `document` 对象来访问和操作网页的元素。

本文将以获取 `div` 元素为例，介绍如何使用 JavaScript 中的 `document` 对象来获取 `div` 元素。

要使用JavaScript 获取`div` 元素，我们首先需要了解`document` 对象。

`document` 对象是JavaScript 中表示整个HTML 文档的对象，可以通过它来访问和操作文档中的元素、样式和事件等。

获取 `div` 元素的方法有多种，下面将介绍其中几种常用的方法。

1. 通过元素的 `id` 属性获取 `div` 元素：```javascriptvar divElement = document.getElementById("divId");```上述代码中的 `"divId"` 是 `div` 元素的 `id` 属性值，通过`getElementById` 方法可以获取该 `id` 属性对应的 `div` 元素。

如果文档中存在多个具有相同 `id` 属性值的元素，则只会返回第一个匹配的元素。

2. 通过元素的 `class` 属性获取 `div` 元素：```javascriptvar divElements = document.getElementsByClassName("divClass");```上述代码中的 `"divClass"` 是 `div` 元素的 `class` 属性值，通过`getElementsByClassName` 方法可以获取所有具有相同`class` 属性值的 `div` 元素。

返回的结果是一个包含所有匹配元素的数组。

3. 通过元素的标签名获取 `div` 元素：```javascriptvar divElements = document.getElementsByTagName("div");```上述代码中的`"div"` 是`div` 元素的标签名，通过`getElementsByTagName` 方法可以获取所有 `div` 元素。

document用法js

document用法js在JavaScript中，document对象是Web应用程序与浏览器交互的主要接口。

它代表了浏览器窗口中可见的文档，提供了许多属性和方法，用于处理文档的加载、显示、交互和修改等操作。

下面将详细介绍document对象的用法。

一、基本含义document对象表示浏览器窗口中当前的HTML文档。

它是一个全局对象，可以在JavaScript代码中的任何地方访问。

二、属性和方法1.属性(1)文档内容：document.documentElement属性返回文档的根元素（即<html>元素）。

(2)文档URL：document.URL属性返回当前文档的URL。

(3)文档标题：document.title属性返回当前文档的标题。

(4)文档类型：document.doctype属性返回文档类型声明对象（如果存在）。

2.方法(1)加载和显示文档：document.open()方法用于打开一个新的文档或清空现有文档的内容，以便于新的内容可以写入其中。

document.write()方法用于向文档中写入内容。

这两个方法通常一起使用，以加载并显示HTML文档。

(2)创建新元素：document.createElement()方法用于创建一个新的HTML元素，并将其添加到文档中。

(3)修改元素内容：document.getElementById()、document.getElementsByClassName()和document.getElementsByTagName()方法可用于获取文档中的元素，并对其进行操作，如修改其内容和属性。

(4)事件处理：document对象可以监听各种浏览器事件，如点击、鼠标移动、键盘输入等，并相应地执行回调函数。

常用的事件处理方法包括addEventListener()和removeEventListener()。

三、常见用法示例1.加载和显示HTML文档：```javascriptdocument.open();//打开新的文档或清空现有文档内容document.write('<html><head><title>MyTitle</title></head> <body>HelloWorld!</body></html>');//写入内容document.close();//关闭文档```2.创建新元素并添加到文档中：```javascriptvarp=document.createElement('p');//创建新的<p>元素p.textContent='Thisisanewparagraph.';//设置内容document.body.appendChild(p);//将<p>元素添加到<body>元素中```3.使用getElementById获取元素并进行操作：```javascriptvarmyElement=document.getElementById('myId');//获取具有指定ID的元素myElement.style.color='red';//修改元素的字体颜色为红色```4.事件处理示例：```javascriptdocument.getElementById('myButton').addEventListener('cli ck',function(){alert('Buttonwasclicked.');//当按钮被点击时显示警告框});```以上是document对象的一些常用属性和方法，通过这些方法可以方便地操作和处理HTML文档。

js中document.createEvent的用法

js中document.createEvent的⽤法<a class="comment-mod" onclick="alert('ss')" href="#">评论</a>如果⽤户直接查看⽂章列表，那么所有的评论以及评论框都是不显⽰的，但是如果⽤户通过别的页⾯⽐如⾸页的个⼈动态直接定位到这篇⽇志，那么评论就应该全部显⽰。

⽽列表页和查看单个条⽬的页⾯是同⼀个页⾯，这就要求我判断⼀下⽤户是否定位到该篇⽇志，如果是，就通过JS来触发 A 标签的点击事件。

⼀开始我尝试了⼀些⽅法，想当然地以为 A 标签和按钮⼀样是有 onclick() 事件的，结果发现没有，后来从⽹上搜了⼀些资料之后，成功解决了这个问题^_^ 。

解决办法是针对 IE 和 FF编写不同的逻辑，部分代码如下：复制代码代码如下:<script>var comment = document.getElementsByTagName('a')[0];if (document.all) {// For IEcomment.click();} else if (document.createEvent) {//FOR DOM2var ev = document.createEvent('HTMLEvents');ev.initEvent('click', false, true);comment.dispatchEvent(ev);}</script>语法：createEvent(eventType)参数描述eventType想获取的 Event 对象的事件模块名。

关于有效的事件类型列表，请参阅"说明"部分。

返回值返回新创建的 Event 对象，具有指定的类型。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript中document的用法代码document.title //设置文档标题等价于HTML的<title>标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)document.linkColor //未点击过的链接颜色document.alinkColor //激活链接(焦点在此链接上)的颜色document.vlinkColor //已点击过的链接颜色document.URL //设置URL属性从而在同一窗口打开另一网页document.fileCreatedDate //文件建立日期，只读属性document.fileModifiedDate //文件修改日期，只读属性document.fileSize //文件大小，只读属性document.cookie //设置和读出cookiedocument.charset //设置字符集简体中文:gb2312对象方法代码document.write() //动态向页面写入内容document.createElement(Tag) //创建一个html标签对象document.getElementById(ID) //获得指定ID值的对象document.getElementsByName(Name) //获得指定Name值的对象images集合(页面中的图象)a)通过集合引用代码document.images //对应页面上的<img>标签document.images.length //对应页面上<img>标签的个数document.images[0] //第1个<img>标签document.images[i] //第i-1个<img>标签b)通过nane属性直接引用代码<img name="oImage">document.images.oImage //属性c)引用图片的src属性代码document.images.oImage.src //属性.srcd)创建一个图象代码var oImageoImage = new Image()document.images.oImage.src="/1.jpg"同时在页面上建立一个<img>标签与之对应就可以显示代码<html><img name=oImage><script type="text/javascript">var oImageoImage = new Image()document.images.oImage.src="/1.jpg"</script></html>forms集合(页面中的表单)a)通过集合引用代码document.forms //对应页面上的<form>标签document.forms.length //对应页面上<form>标签的个数document.forms[0] //第1个<form>标签document.forms[i] //第i-1个<form>标签document.forms[i].length //第i-1个<form>中的控件数document.forms[i].elements[j] //第i-1个<form>中第j-1个控件b)通过标签name属性直接引用代码<form name="Myform"><input name="myctrl"></form> document.Myform.myctrl //document.表单名.控件名代码<html><form name="Myform"><input type="text" name="oText"><input type="password" name="oPswd"><form><script type="text/javascript">//获取文本密码框的值document.write(document.Myform.oText.value)document.write(document.Myform.oPswd.value)</script></html>document 文挡对象- JavaScript脚本语言描述---------------------------------------------------------------------注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写否则会提示你一个错误信息"引用的元素为空或者不是对象"------------------------------------------------------------------------------------------------------------------------------------------常用对象方法document.write() //动态向页面写入内容document.createElement(Tag) //创建一个html标签对象document.getElementById(ID) //获得指定ID值的对象document.getElementsByName(Name) //获得指定Name值的对象document.body.appendChild(oTag)---------------------------------------------------------------------body-主体子对象document.body //指定文档主体的开始和结束等价于<body></body> document.body.bgColor //设置或获取对象后面的背景颜色document.body.link //未点击过的链接颜色document.body.alink //激活链接(焦点在此链接上)的颜色document.body.vlink //已点击过的链接颜色document.body.text //文本色document.body.innerText //设置<body>...</body>之间的文本document.body.innerHTML //设置<body>...</body>之间的HTML代码document.body.topMargin //页面上边距document.body.leftMargin //页面左边距document.body.rightMargin //页面右边距document.body.bottomMargin //页面下边距document.body.background //背景图片document.body.appendChild(oTag) //动态生成一个HTML对象常用对象事件document.body.onclick="func()" //鼠标指针单击对象是触发document.body.onmouseover="func()" //鼠标指针移到对象时触发document.body.onmouseout="func()" //鼠标指针移出对象时触发---------------------------------------------------------------------location-位置子对象document.location.hash // #号后的部分document.location.host // 域名+端口号document.location.hostname // 域名document.location.href // 完整URLdocument.location.pathname // 目录部分document.location.port // 端口号document.location.protocol // 网络协议(http:)document.location.search // ?号后的部分documeny.location.reload() //刷新网页document.location.reload(URL) //打开新的网页document.location.assign(URL) //打开新的网页document.location.replace(URL) //打开新的网页---------------------------------------------------------------------selection-选区子对象document.selection---------------------------------------------------------------------<html><form name="Myform"><input type="text" name="oText"><input type="password" name="oPswd"><form><script type="text/javascript">//获取文本密码框的值document.write(document.Myform.oText.value)document.write(document.Myform.oPswd.value)</script></html>-----------------------------------------------------------------------<html><form name="Myform"><input type="checkbox" name="chk" value="1">1<input type="checkbox" name="chk" value="2">2</form><script type="text/javascript">function fun(){//遍历checkbox控件的值并判断是否选中var lengthlength=document.forms[0].chk.lengthfor(i=0;i<length;i++){v=document.forms[0].chk[i].valueb=document.forms[0].chk[i].checkedif(b)alert(v=v+"被选中")elsealert(v=v+"未选中")}}</script><a href=# onclick="fun()">ddd</a></html>-----------------------------------------------------------------------<html><form name="Myform"><select name="oSelect"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></form><script type="text/javascript">//遍历select控件的option项var lengthlength=document.Myform.oSelect.lengthfor(i=0;i<length;i++)document.write(document.Myform.oSelect[i].value)</script><script type="text/javascript">//遍历option项并且判断某个option是否被选中for(i=0;i<document.Myform.oSelect.length;i++){if(document.Myform.oSelect[i].selected!=true)document.write(document.Myform.oSelect[i].value)elsedocument.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>") }</script><script type="text/javascript">//根据SelectedIndex打印出选中的option//(0到document.Myform.oSelect.length-1)i=document.Myform.oSelect.selectedIndexdocument.write(document.Myform.oSelect[i].value)</script><script type="text/javascript">//动态增加select控件的option项var oOption = document.createElement("OPTION");oOption.text="4";oOption.value="4";document.Myform.oSelect.add(oOption);</script><html>-----------------------------------------------------------------------<Div id="oDiv">Text</Div>document.all.oDiv //引用图层oDiv document.all.oDiv.style.display="" //图层设置为可视document.all.oDiv.style.display="none" //图层设置为隐藏document.getElementId("oDiv") //通过getElementId引用对象document.getElementId("oDiv").style=""document.getElementId("oDiv").display="none"/*document.all表示document中所有对象的集合只有ie支持此属性，因此也用来判断浏览器的种类*/图层对象的4个属性document.getElementById("ID").innerText //动态输出文本document.getElementById("ID").innerHTML //动态输出HTMLdocument.getElementById("ID").outerText //同innerTextdocument.getElementById("ID").outerHTML //同innerHTML<html><script type="text/javascript">function change(){document.all.oDiv.style.display="none"}</script><Div id="oDiv" onclick="change()">Text</Div></html><html><script type="text/javascript">function changeText(){document.getElementById("oDiv").innerText="NewText" }</script><Div id="oDiv" onmouseover="changeText()">Text</Div> </html>。