首页 > 代码库 > 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节点总结