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()是将空文本节点删除或将相邻的文本节点合并为一个文本节点。