首页 > 编程笔记 > JavaScript笔记
阅读:41
JavaScript DOM操作详解(附带实例)
DOM(Document Object Model,文档对象模型)可以处理 XML、HTML、XHTML 等格式的文档模型,页面中主要使用 document 对象等资源进行操作。
下面的代码演示了 document.getElementById() 方法的应用。
页面中的多个元素可能使用相同的 class 属性值,获取这些元素时可以使用 document.getElementsByClassName() 方法,它会返回一个由这些元素组成的集合,下面的代码演示了相关的操作:
页面中,多个元素也可能有相同名称,如 input 元素中的 checkbox、radio 等类型。下面的代码演示了如何使用 document.getElementsByName() 方法获取同名元素集合:
页面会显示三个消息对话框,分别显示三个 radio 元素的 value 属性,即 0、1、2。需要获取已选择项的值,可以参考如下代码:
通过 document.getElementsByTagName() 方法,可以获取指定类型的元素集合,即通过元素标签名获取一组元素,下面的代码演示了相关的操作:
document 对象中定义了一些属性,用于获取特殊元素的集合(如图片、链接等),常用的属性包括:
下面的代码演示了 images 属性的应用:
此外,如果 img 元素中定义了 name 属性,还可以在索引中使用这个名称来访问图片元素,如 document.images["img_earth"]。
常用的节点类型是 1 和 3,也就是使用标记定义的元素节点,以及单纯的文本节点。
获取一个节点对象后,可以使用下面的属性获取节点信息:
下面的代码演示了这几个属性的应用:
单击“测试”按钮后,页面显示效果见下图:
与元素操作不同,通过节点对象可以直接操作页面中的文本内容,如下面的代码:
本例中,文本节点的 nodeName 属性会返回 #text,数字 3 表示节点类型为文本节点,而文本节点的值就是文本内容。
关于文本节点,需要特别注意的是,在处理 DOM 模型时,很多浏览器会将元素之间的空白字符(如换行符、空格等)当作文本节点来处理,这样,在页面中就可能多出很多并不期望的节点对象。下面的代码演示了这一特性。
处理一系列的节点对象时,应注意文本节点的问题,如果已明确处理的内容中没有多余的空白字符就没有问题,如果无法确认,需要根据实际情况选择正确的方式来处理页面中的节点。
获取一个节点对象后,还可以获取与当前节点相关的节点对象或集合,常用的成员包括:
操作节点时,还可以根据需要动态创建,如:
下面的代码演示了添加节点的方法,会在 div1 元素中的 p2 元素前添加一个 p 元素,并显示“段落三”:
其中,innerText 属性将内容当作文本处理,而 innerHTML 属性则将内容解析为 HTML 代码,可以使用标签生成页面元素。
下面的代码演示了这两个属性的应用:
首先,HTML 元素的属性会映射为元素对象的一系列属性,执行下面的代码会通过表单元素中的 value 属性读取或设置元素中显示的数据。
需要获取用户名文本框中的数据,可以参考下面的代码:
页面中的 select 和 option 元素定义了一个显示性别的下拉列表,此时,可以通过 select 对象的 value 属性来操作选项,如下面的代码可以设置选中的项目为“男”(值 1):
除了使用元素对象的属性,还可以使用 setAttribute() 和 getAttribute() 方法设置和读取元素的属性值。其中,setAttribute() 方法包括两个参数,参数一为属性名,参数二为属性值,如下面的代码:
下面的代码演示了 getAttribute() 方法的使用:
如果需要通过编程改变元素的样式,可在元素的 style 属性中进一步调用样式属性名称。如下面的代码:
大多数情况下,可能会直接使用属性,而不是使用 setAttribute() 和 getAttribute() 方法。不过,在一些情况下,setAttribute() 方法编写代码可能更加灵活,例如,同时设置多个 CSS 样式时,就可以直接设置元素的 style 属性,如下面的代码:
JavaScript DOM获取元素
操作页面内容,首先需要获取相应的元素或节点对象,通过 document 对象中的一些方法和属性可以完成这些工作,如:- getElementById() 方法:通过元素的 id 属性值获取唯一的元素对象;
- getElementsByClassName() 方法:通过元素的 class 属性值获取元素对象,返回相应的元素集合;
- getElementsByName() 方法:通过元素的name属性值获取元素对象,返回相应的元素集合;
- getElementsByTagName() 方法:通过元素类型获取元素对象,返回相应的元素集合,如 document.getElementsByTagName("p") 获取所有段落元素;
- 通过 document 中的元素集合属性,如 images 属性获取页面中所有 img 元素的集合、links 属性获取所有含有 href 属性的 a 元素集合等。
下面的代码演示了 document.getElementById() 方法的应用。
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="e1">元素一</div> <div id="e2">元素二</div> </body> </html> <script> var e = document.getElementById("e1"); window.alert(e.innerText); </script>代码中,首先使用 document.getElementById() 方法获取 id 为 e1 的元素,其次通过元素对象的 innerText 属性获取其中的文本内容,并由消息对话框显示,代码执行结果见下图。

页面中的多个元素可能使用相同的 class 属性值,获取这些元素时可以使用 document.getElementsByClassName() 方法,它会返回一个由这些元素组成的集合,下面的代码演示了相关的操作:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="ea">元素一</div> <div class="ea">元素二</div> <div class="ea">元素三</div> </body> </html> <script> var arr = document.getElementsByClassName("ea"); for (var i = 0; i < arr.length; i++) window.alert(arr[i].innerText); </script>执行代码后会显示三个消息对话框,分别显示了三个 div 元素中的文本内容。
页面中,多个元素也可能有相同名称,如 input 元素中的 checkbox、radio 等类型。下面的代码演示了如何使用 document.getElementsByName() 方法获取同名元素集合:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method="get"> <label>性别</label> <input type="radio" name="sex" value="0" checked="checked" /> 保密 <input type="radio" name="sex" value="1" /> 先生 <input type="radio" name="sex" value="2" /> 女士 </form> </body> </html> <script> var arr = document.getElementsByName("sex"); for (var i = 0; i < arr.length; i++) window.alert(arr[i].value); </script>
页面会显示三个消息对话框,分别显示三个 radio 元素的 value 属性,即 0、1、2。需要获取已选择项的值,可以参考如下代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method="get"> <p> <label>性别</label> <input type="radio" name="sex" value="0" checked="checked" /> 保密 <input type="radio" name="sex" value="1" /> 先生 <input type="radio" name="sex" value="2" /> 女士 </p> <p> <button type="button" onclick="btnTest();">测试</button> </p> </form> </body> </html> <script> function btnTest() { var arr = document.getElementsByName("sex"); for (var i = 0; i < arr.length; i++) { if (arr[i].checked == true) { window.alert("选中的值:" + arr[i].value); return; } } } </script>代码的执行结果如下图所示:

通过 document.getElementsByTagName() 方法,可以获取指定类型的元素集合,即通过元素标签名获取一组元素,下面的代码演示了相关的操作:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>段落一</p> <p>段落二</p> <p>段落三</p> </body> </html> <script> var arr = document.getElementsByTagName("p"); for (var i = 0; i < arr.length; i++) window.alert(arr[i].innerText); </script>执行代码后会通过三个消息对话框分别显示三个 p 元素中的文本内容。
document 对象中定义了一些属性,用于获取特殊元素的集合(如图片、链接等),常用的属性包括:
- images:包含了页面中所有 img 元素的集合;
- links:包含了页面中含有 href 属性的 a 元素的集合;
- forms:包含了页面中所有表单(form 元素)的集合;
- applets:包含了页面中所有 applet 应用集合;
- embeds:包含了所有 embed 元素集合。
下面的代码演示了 images 属性的应用:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> #slide img { display:none; } </style> </head> <body> <div id="slide"> <img id="img_earth" src="/img/earth.png" alt="地球" /> <img id="img_mars" src="/img/mars.png" alt="火星" /> <img id="img_jupiter" src="/img/jupiter.png" alt="木星" /> </div> </body> </html> <script> var arrImage = document.images; var curSlide = -1; var maxIndex = arrImage.length - 1; // 切换下一张 function nextSlide() { curSlide = curSlide + 1; if (curSlide > maxIndex) curSlide = 0; for (var i = 0; i <= maxIndex; i++) { if (i == curSlide) arrImage[i].style.display = "block"; else arrImage[i].style.display = "none"; } // 下一张 setTimeout(nextSlide, 1000); } // 开始播放 nextSlide(); </script>本例实现了一个简单的幻灯播放效果,页面会循环显示地球、火星和木星图片。代码中,可以通过 setTimeout() 函数的第二个参数修改图片切换的间隔时间。
此外,如果 img 元素中定义了 name 属性,还可以在索引中使用这个名称来访问图片元素,如 document.images["img_earth"]。
JavaScript DOM节点对象
节点(node)和元素的概念比较容易混淆。在页面中,或者说 DOM 模型中,节点类型有多种,而元素(element)只是其中的一种,常用的节点类型如下:- 1 (ELEMENT_NODE)
- 3 (TEXT_NODE)
常用的节点类型是 1 和 3,也就是使用标记定义的元素节点,以及单纯的文本节点。
获取一个节点对象后,可以使用下面的属性获取节点信息:
- nodeName 属性:返回元素标记名称的大写形式,如 P、INPUT 等;
- nodeValue 属性:返回元素的值,没有时返回 null 值;
- nodeType 属性:返回节点类型,如元素节点(1)和文本节点(3)。
下面的代码演示了这几个属性的应用:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form> <p> <label>用户名</label> <input id="username" name="username" maxlength="15" size="15" /> </p> <p> <button onclick="btnTest();">测试</button> </p> </form> </body> </html> <script> function btnTest() { var e = document.getElementById("username"); document.write(" 节点名称: " + e.nodeName + "<br>"); document.write(" 节点类型: " + e.nodeType + "<br>"); document.write(" 节点的值: " + e.nodeValue + "<br>"); } </script>页面初始效果见下图:

单击“测试”按钮后,页面显示效果见下图:

与元素操作不同,通过节点对象可以直接操作页面中的文本内容,如下面的代码:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p id="p1">段落一</p> </body> </html> <script> var e = document.getElementById("p1"); var t = e.childNodes[0]; document.write(" 节点名称: " + t.nodeName + "<br>"); document.write(" 节点类型: " + t.nodeType + "<br>"); document.write(" 节点的值: " + t.nodeValue + "<br>"); </script>代码执行结果见下图:

本例中,文本节点的 nodeName 属性会返回 #text,数字 3 表示节点类型为文本节点,而文本节点的值就是文本内容。
关于文本节点,需要特别注意的是,在处理 DOM 模型时,很多浏览器会将元素之间的空白字符(如换行符、空格等)当作文本节点来处理,这样,在页面中就可能多出很多并不期望的节点对象。下面的代码演示了这一特性。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="article1"> <h1 id="h1">标题一</h1> <p id="p1">段落一</p> <p id="p2">段落二</p> <p id="p3">段落三</p> </div> </body> </html> <script> var eDiv = document.getElementById("article1"); var e = eDiv.firstChild; alert(e.nodeName); </script>消息对话框中会显示 #text。表面上看,article1 中的第一个节点应该是 h1,而本例中却显示为文本节点,它是从 <div id="article1"> 标记后的换行符。
处理一系列的节点对象时,应注意文本节点的问题,如果已明确处理的内容中没有多余的空白字符就没有问题,如果无法确认,需要根据实际情况选择正确的方式来处理页面中的节点。
获取一个节点对象后,还可以获取与当前节点相关的节点对象或集合,常用的成员包括:
- node.parentNode 属性:获取 node 节点的上级节点(Node类型);
- node.hasChildNodes() 方法:判断 node 节点中是否有子节点(Boolean 类型);
- node.firstChild 属性:返回 node 节点中的第一个子节点(Node 类型),没有则返回 undefined 值;
- node.lastChild 属性:返回 node 节点中的最后一个子节点(Node 类型),没有则返回 undefined 值;
- node.childNodes 属性:返回 node 节点所有子节点的集合;
- node.appendChild() 方法:在 node 节点中添加子节点;
- node.insertBefore(x,y) 方法:node 节点中,在 y 节点前添加 x 节点。
操作节点时,还可以根据需要动态创建,如:
- document.createElement() 方法:根据元素名称创建元素节点;
- document.createTextNode() 方法:根据文本内容创建文本节点。
下面的代码演示了添加节点的方法,会在 div1 元素中的 p2 元素前添加一个 p 元素,并显示“段落三”:
<div id="div1"> <p id="p1">段落一</p> <p id="p2">段落二</p> </div> <script> var div1 = document.getElementById("div1"); var p2 = document.getElementById("p2"); var p3 = document.createElement("p"); p3.appendChild(document.createTextNode("段落三")); div1.insertBefore(p3, p2); </script>代码执行结果见下图:

innerHTML和innerText属性
虽然可以使用节点对象操作页面内容,但对于熟悉 HTML 元素的开发者来讲,有更加灵活的方法处理页面内容,如元素的 innerText 属性和 innerHTML 属性,这两个属性都定义为字符串类型,但它们对字符串内容的处理方式不同。其中,innerText 属性将内容当作文本处理,而 innerHTML 属性则将内容解析为 HTML 代码,可以使用标签生成页面元素。
下面的代码演示了这两个属性的应用:
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p id="p1">段落一</p> <p id="p2">段落二</p> </body> </html> <script> var p1 = document.getElementById("p1"); var p2 = document.getElementById("p2"); var s = "<b>加粗文本</b>"; p1.innerText += s; p2.innerHTML += s; </script>代码中,使用 += 运算符将字符串内容分别追加到两个 p 元素中,代码执行结果见下图:

DOM操作元素属性与样式
接下来介绍如何通过元素对象操作元素的属性和样式。首先,HTML 元素的属性会映射为元素对象的一系列属性,执行下面的代码会通过表单元素中的 value 属性读取或设置元素中显示的数据。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <p> <label for="username">用户名</label> <input id="username" name="username" maxlength="15" size="15" /> </p> <p> <label for="sex">性别</label> <select id="sex" name="sex"> <option value="0" selected>保密</option> <option value="1">男</option> <option value="2">女</option> </select> </p> <p> <button onclick="btnTest();">测试</button> </p> </body> </html> <script> function btnTest() { var username = document.getElementById("username"); username.value = "Tom"; } </script>页面显示时,用户名显示为空,单击“测试”按钮,用户名文本框中会显示 Tom,代码执行结果见下图:

需要获取用户名文本框中的数据,可以参考下面的代码:
<script> function btnTest() { var username = document.getElementById("username"); alert(username.value); } </script>
页面中的 select 和 option 元素定义了一个显示性别的下拉列表,此时,可以通过 select 对象的 value 属性来操作选项,如下面的代码可以设置选中的项目为“男”(值 1):
<script> function btnTest() { var sex = document.getElementById("sex"); sex.value = 1; } </script>
除了使用元素对象的属性,还可以使用 setAttribute() 和 getAttribute() 方法设置和读取元素的属性值。其中,setAttribute() 方法包括两个参数,参数一为属性名,参数二为属性值,如下面的代码:
<script> function btnTest() { var username = document.getElementById("username"); username.setAttribute("value", "Jerry"); } </script>
下面的代码演示了 getAttribute() 方法的使用:
<script> function btnTest() { var username = document.getElementById("username"); alert(username.getAttribute("maxlength")); } </script>
请注意,使用 getAttribute() 方法时,如果参数指定了元素中没有定义的属性,方法将返回 null 值。
如果需要通过编程改变元素的样式,可在元素的 style 属性中进一步调用样式属性名称。如下面的代码:
<script> function btnTest() { var username = document.getElementById("username"); username.style.backgroundColor = "#eee"; } </script>本例中,单击“测试”按钮后,用户名文本框的背景色会变成灰色。
大多数情况下,可能会直接使用属性,而不是使用 setAttribute() 和 getAttribute() 方法。不过,在一些情况下,setAttribute() 方法编写代码可能更加灵活,例如,同时设置多个 CSS 样式时,就可以直接设置元素的 style 属性,如下面的代码:
<script> function btnTest() { var username = document.getElementById("username"); username.setAttribute("style", "font-weight:bold;background-color:steelblue;"); } </script>单击“测试”按钮后,用户名文本框中的字体会加粗,颜色变为 steelblue 色,背景会变为浅灰色。