首页 > 代码库 > JS中Node节点总结
JS中Node节点总结
Node的三个基本属性：
1.nodeType：表明节点类型，1是元素节点，3是文本节点。
2.nodeName: 表明节点名称，元素节点为标签名，文本节点为#text。
3.nodeValue：表明节点值，元素节点为null，文本节点为文本内容。
Node的节点关系：
1.parentNode与childNodes
parentNode寻找当前节点的父节点，childNodes寻找当前节点的子节点，其中包括文本节点和元素节点(特别需要注意空白的文本节点也算是节点)如下程序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>childNodes.length</title></head><body> <ul id="ul"> <li></li> <li></li> <li></li> </ul> <script> var oUl=document.getElementById(‘ul‘); alert(oUl.childNodes.length);//是7不是3 </script></body></html>
2:firstChild与lastChild
分别对应父节点的第一个节点与最后一个节点，firstChild相当于childNodes[0]或childNodes.item(0)。
3.nextSibling与previousSibling
分别对应当前节点的前一个节点与当前元素的后一个节点。
Node的操作节点：
Node的操作节点有appendChild(),insertBefore(),replaceChild(),removeChild(),cloneNode(),normalize()
1.appendChild(newNode)是将newNode添加到当前节点的最后一个子节点的后面，如果newNode已经是文档的一部分，则appendChild操作相当于剪切；若果newNode是新创造的节点，则appendChild操作相当于添加。
2.insertBefore(newNode,oldNode)是将newNode添加到当前节点的oldNode子节点的前面,如果insertBefore(newNode,null),则insertBefore()的操作和appendChild()一样。
3.replaceChild(newNode,oldNode)是将oldNode替换为newNode，不过oldNode的所有关系指针newNode也都继承下来。
4.removeChild(oldNode)是删除oldNode节点。
5.cloneNode(true/false)是将已知节点复制一份，如果为true，包括子节点，若果为false，不包括子节点。然后通过appendChild(),insertBefore(),replaceChild()将其添加到文档中。
6.normalize()是将空文本节点删除或将相邻的文本节点合并为一个文本节点。
JS中Node节点总结