- DOM1级定义了一个Node接口,该接口作为Node类型实现;
// 节点类型(nodeType)1~12 Node.ELEMENT_NODE; // 1 Node.ATTRIBUTE_NODE; // 2 Node.TEXT_NODE; // 3 Node.CDATA_SECTION_NODE; // 4 Node.ENTITY_REFERENCE_NODE; // 5 Node.ENTITY_NODE; // 6 Node.PROCESSING_INSTRUCTION_NODE; // 7 Node.COMMENT_NODE; // 8 Node.DOCUMENT_NODE; // 9 Node.DOCUMENT_TYPE_NODE; // 10 Node.DOCUMENT_FRAGMENT_NODE; // 11 Node.NOTATION_NODE; // 12
-
JavaScript中所有节点类型都继承自Node类型,所有的节点类型都共享相同的基本属性和方法;
-
最佳实践:对节点进行操作时,最好使用nodeType检测节点的类型;
nodeName和nodeValue
对于元素节点(nodeType === 1),nodeName是元素标签名的大写,nodeValue的值始终是null;
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="ele">
some text
</div>
</body>
<script>
var ele = document.getElementById("ele");
console.log(ele.nodeType === 1); // 输出:true
console.log(ele.nodeName); // 输出:DIV
console.log(ele.nodeValue); // 输出:null
</script>
</html>
节点关系
- 节点关系可以用传统的家族关系来表示,文档树可以看做家谱;
- 节点的childNodes属性保存的是一个NodeList对象;
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="ul">
<li>
123
</li>
<li>
456
</li>
<li>
789
</li>
</ul>
</body>
<script>
var ul = document.getElementById("ul");
console.log(ul.childNodes instanceof NodeList); // 输出:True
</script>
</html>
- NodeList是一种类数组对象,但不是Array的实例,用于保存一组有序的节点,因为是基于DOM结构动态执行查询的结果,所以NodeList对象是动态变化的(例如length属性)
- NodeList中节点的访问方法:
<!DOCTYPE html> <html> <head></head> <body> <ul id="ul"> <li> 123 </li> <li> 456 </li> <li> 789 </li> </ul> </body> <script> var _childNodes = document.getElementById("ul").childNodes; console.log(_childNodes[3]); // 方法1 console.log(_childNodes.item(3)); // 方法2 </script> </html>
-
NodeList对象转数组的通用方法:详见Javascript-DOM中NodeList对象转数组的通用方法
-
previousSibling, nextSibling, previousElementSibling, nextElementSibling, firstChild, lastChild, firstElementChild, lastElementChild 如果以上属性没有指向,则返回null
-
children可以过滤所有其他节点类型,返回所有元素类型的子节点:
<!DOCTYPE html> <html> <head></head> <body> <ul id="ul"> <li> 123 </li> <li> 456 </li> <li> 789 </li> </ul> </body> <script> var _children = document.getElementById("ul").children; console.log(_children); </script> </html>
-
hasChildNodes() 方法用于检测是否含有该子节点
-
ownerDocument 属性指向于整个文档的文档节点,每个节点都有这个属性;
节点的操作
- appendChild()新增节点:
<!DOCTYPE html> <html> <head></head> <body> <ul id="ul"> <li> 123 </li> <li> 456 </li> <li> 789 </li> </ul> </body> <script> var ul = document.getElementById("ul"); var newLi = document.createElement("li"); ul.appendChild(newLi); console.log(ul.childNodes.length); </script> </html>
-
insertBefore() 包含两个参数,顺序分别是:要插入的节点和参照的节点,返回被插入的节点;
-
replaceChild(), removeChild() 返回的是被替换、移除的节点 ,被替换和移除的节点仍然在文档中存在,只不过没有了位置。
-
在不支持子节点的节点上调用上面提到的子节点的方法,会导致错误的发生;
其他方法
- cloneNode() 创建调用这个方法的节点的一个完全相同的副本,当传入可选布尔参数为true时,将执行深拷贝;
- cloneNode() 不会拷贝添加到DOM节点中的Javascript属性,例如事件处理程序;IE浏览器会连带事件处理程序一起拷贝;
- 最佳实践:在cloneNode()之前先移除事件处理程序;
- normalize()的作用:处理文档树中的文本节点,它会删除空文本节点,合并相邻的两个文本节点。