JavaScript DOM节点操作详解：从基础概念到API实战

一、DOM

DOM基本概念与结构

DOM全称为Document Object Model（文档对象模型），它是一种独立于平台和编程语言的接口，允许程序动态地访问和更新文档的内容、结构以及样式。简而言之，DOM是处理HTML或XML文档的标准方式。其设计遵循对象管理组织（OMG）的规范，因此可广泛应用于各种编程语言中。其中，“D”代表文档（HTML或XML），“O”代表对象（document对象的属性和方法），“M”代表模型。DOM是一种基于树的API，专门针对XML（及HTML）设计。它将文档表示为一棵节点树（Node Tree），通过父子、兄弟等层级关系来组织数据。DOM定义了Node接口及多种节点类型，以全面描述XML节点的不同属性。

二、DOM的结构

三、节点

DOM节点类型与层次关系

根据DOM规范，HTML文档中的每个组成部分都被视为一个节点。具体规定如下：整个文档被视为一个文档节点；每个HTML标签对应一个元素节点；标签内的文本内容构成文本节点；HTML元素的属性对应属性节点；而注释则属于注释节点。

四、Node 层次

节点之间存在明确的层级关系。HTML文档中的所有节点共同构成一棵文档树（或称节点树）。文档树从文档节点开始，向下延伸出分支，直至包含所有文本节点的叶子节点。文档中的每个元素、属性和文本都对应树中的一个特定节点。

五、节点及其类型

从结构图中可以看出，整个文档本身就是一个文档节点。每个HTML标签对应一个元素节点，标签内的文字属于文本节点，而标签的属性则对应属性节点。在DOM中，一切皆节点。

节点树的概念直观地展示了节点间的关系。最顶端的节点被视为“树根”。节点之间存在着父子、祖先与子孙以及兄弟关系。图中直接相连的节点表示父子关系，拥有相同父节点的节点之间则为兄弟关系。

DOM节点查找与访问方法

六、查找并访问节点

有多种方法可以查找需要操作的元素：一是使用getElementById()和getElementsByTagName()方法；二是利用元素节点的parentNode、firstChild以及lastChild属性进行导航。

七、查找元素节点

getElementById()方法用于查找具有指定id属性值的元素，返回对应的元素节点。若未找到匹配元素，则返回null。语法为：var oElement = document.getElementById(sID)。需要注意的是，该方法仅适用于document对象。

<input type="text" value="国庆60周年" id="tid"> function test(){ var usernameElement=document.getElementById(“tid"); //获取元素的值 alert("usernameElement.value: "+usernameElement.value) //获取元素的类型 alert("usernameElement.type: "+usernameElement.type) }

getElementsByName()方法用于查找具有指定name属性的所有元素，返回一个节点集合（NodeList），该集合可像数组一样处理。集合的length属性等于文档中拥有指定name属性的元素总数。

<form name="form1"> <input type="text" name="tname" value="国庆60年_1" /><br> <input type="text" name="tname" value="国庆60年_2" /><br> <input type="text" name="tname" value="国庆60年_3" /><br> <input type="button" name="ok" value="保存" id="ok" onclick="test();"> </form> function test(){ var tnameArray=document.getElementsByName("tname"); alert(tnameArray.length); for(var i=0;i<tnameArray.length;i++){ window.alert(tnameArray[i].value); } }

<input type="text" name="username" value="国庆60年_1" /><br>
<input type="text" name="username" value="国庆60年_2" /><br>
<input type="text" name="username" value="国庆60年_3" /><br>
<input type="button" name="ok" value="保存" id="ok"><br>
<script language="JavaScript">
//该方法返回是数组类型
var usernameElements=document.getElementsByName("username");
for (var i = 0; i < usernameElements.length; i++) {
//获取元素的类型
//alert(usernameElements[i].type)
//获取元素value的值
//alert(usernameElements[i].value);
//采用函数直接量的方法
usernameElements[i].onchange = function(){
alert(this.value);
}
}
</script>

<input type="text" name="username" value="国庆60年_1" /><br> <input type="text" name="username" value="国庆60年_2" /><br> <input type="text" name="username" value="国庆60年_3" /><br> <input type="button" name="ok" value="保存" id="ok"><br><script language="JavaScript"> //该方法返回是数组类型 var usernameElements=document.getElementsByName("username"); for (var i = 0; i < usernameElements.length; i++) { //获取元素的类型 //alert(usernameElements[i].type) //获取元素value的值 //alert(usernameElements[i].value); //采用函数直接量的方法 usernameElements[i].onchange = function(){ alert(this.value); }} </script>
 

getElementsByTagName()方法用于查找具有指定标签名的所有元素，返回一个节点集合，该集合可像数组一样处理。集合的length属性等于文档中拥有指定标签名的元素总数。语法如下：var elements = document.getElementsByTagName(tagName); 或 var elements = element.getElementsByTagName(tagName);。该方法不仅限于整个文档，也可用于特定元素的子节点中查找指定标签名的元素。例如：var container = document.getElementById(“sid”); var elements = container.getElementsByTagName(“p”); alert(elements .length);

// //处理input
// var inputElements=document.getElementsByTagName("input");
// //输出input标签的长度
// //alert(inputElements.length);
// for(var i=0;i<inputElements.length;i++){
// if(inputElements[i].type!='button'){//submit
// alert(inputElements[i].value);
// }
// }
//处理select
// //获取select标签
// var selectElements=document.getElementsByTagName("select");
// //获取select下的子标签
// for(var j=0;j<selectElements.length;j++){
// var optionElements=selectElements[j].getElementsByTagName("option");
// for(var i=0;i<optionElements.length;i++){
// alert(optionElements[i].value);
// }
// }
var textareaElements=document.getElementsByTagName("textarea");
alert(textareaElements[0].value);

// //处理input// var inputElements=document.getElementsByTagName("input");// //输出input标签的长度// //alert(inputElements.length);// for(var i=0;i<inputElements.length;i++){// if(inputElements[i].type!='button'){//submit// alert(inputElements[i].value);// }// }//处理select// //获取select标签// var selectElements=document.getElementsByTagName("select");// //获取select下的子标签// for(var j=0;j<selectElements.length;j++){// var optionElements=selectElements[j].getElementsByTagName("option");// for(var i=0;i<optionElements.length;i++){// alert(optionElements[i].value);// }// } var textareaElements=document.getElementsByTagName("textarea"); alert(textareaElements[0].value);

var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
if (inputElements.type != 'submit') {
inputElements[i].onchange = function(){
alert(this.value)
};
}
var selectElements=document.getElementsByTagName("select");
for (var i = 0; i < selectElements.length; i++) {
selectElements[i].onchange=function(){
alert(this.value);
}
}

 var inputElements=document.getElementsByTagName("input"); for(var i=0;i<inputElements.length;i++){ if (inputElements.type != 'submit') { inputElements[i].onchange = function(){ alert(this.value) }; } var selectElements=document.getElementsByTagName("select"); for (var i = 0; i < selectElements.length; i++) { selectElements[i].onchange=function(){ alert(this.value); } }

DOM节点导航与属性操作

八、parentNode、firstChild以及lastChild

这三个属性parentNode、firstChild以及lastChild允许开发者遵循文档结构，在文档中进行“短距离”的节点遍历。参考以下HTML片段：

<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>

在上述HTML代码中，第一个<td>是<tr>元素的首个子元素（firstChild），最后一个<td>是<tr>元素的最后一个子元素（lastChild）。此外，<tr>是每个<td>元素的父节点（parentNode）。

var textareaElements=document.getElementsByTagName("textarea");
for (var i = 0; i < textareaElements.length; i++) {
textareaElements[i].onchange = function(){
alert(this.value);
};
}

 var textareaElements=document.getElementsByTagName("textarea"); for (var i = 0; i < textareaElements.length; i++) { textareaElements[i].onchange = function(){ alert(this.value); }; }
 

九、查看是否存在子节点

hasChildNodes()方法用于检查一个元素是否包含子节点，返回布尔值true或false。语法为：var booleanValue = element.hasChildNodes();。文本节点和属性节点不可能包含子节点，因此对这两类节点调用hasChildNodes()始终返回false。如果返回false，则childNodes、firstChild和lastChild将分别为空数组和空字符串。

hasChildNodes()

var selectElements=document.getElementsByTagName("select");
alert(selectElements[0].hasChildNodes())
var inputElements=document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
alert(inputElements[i].hasChildNodes());
}

 var selectElements=document.getElementsByTagName("select"); alert(selectElements[0].hasChildNodes())var inputElements=document.getElementsByTagName("input");for(var i=0;i<inputElements.length;i++){ alert(inputElements[i].hasChildNodes());}
 

十、根节点

有两种特殊的文档属性可用于访问根节点：document.documentElement和document.body。第一个属性返回XML及HTML文档中的文档根节点。第二个属性是HTML页面的特殊扩展，提供了对<body>标签的直接访问。

十一、DOM节点信息

每个节点都包含描述其信息的属性，主要包括：nodeName（节点名称）。

nodeName属性包含节点的名称。语法为：var name = node.nodeName;。对于元素节点，nodeName即为标签名称；对于属性节点，为属性名称；对于文本节点，nodeName始终为#text；对于文档节点，始终为#document。注意：nodeName包含的HTML元素标签名称永远是大写字母。

nodeValue（节点值）

nodeValue属性返回给定节点的当前值（字符串）。若节点为属性节点，返回属性值；若为文本节点，返回文本内容；若为元素节点，返回null。nodeValue是一个读写属性，但不能直接设置元素节点的nodeValue值，却可以为文本节点的nodeValue属性赋值。示例：var li = document.getElementById(“li”); if(li.firstChild.nodeType == 3) li.firstChild.nodeValue = “国庆60年”;。

nodeType属性返回一个整数，代表给定节点的类型。nodeType属性返回的整数值对应12种节点类型，常用的有三种：Node.ELEMENT_NODE（值为1，表示元素节点）、Node.ATTRIBUTE_NODE（值为2，表示属性节点）以及Node.TEXT_NODE（值为3，表示文本节点）。nodeType是一个只读属性。