【javascript】DOM操作方法（2）——节点方法

Node.appendChild(node)   //向节点添加最后一个子节点
Node.hasChildNodes()   //返回布尔值，表示当前节点是否有子节点
Node.cloneNode(true);  // 默认为false(克隆节点), true(克隆节点及其属性，以及后代)
Node.insertBefore(newNode,oldNode)  // 在指定子节点之前插入新的子节点
Node.removeChild(node)   //删除节点，在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild)  //替换节点
Node.contains(node)  //返回一个布尔值，表示参数节点是否为当前节点的后代节点。
Node.compareDocumentPosition(node)   //返回一个7个比特位的二进制值，表示参数节点和当前节点的关系
Node.isEqualNode(noe)  //返回布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。
Node.normalize()   //用于清理当前节点内部的所有Text节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。
//ChildNode接口
Node.remove()  //用于删除当前节点
Node.before()  //
Node.after()
Node.replaceWith()

1.Node.appendChild(node) //向节点添加最后一个子节点

<ul id="list">
    <li>列表1</li>
    <li>列表2</li>
</ul>
<button onclick="myFunction()">点我</button>
<script type="text/javascript">
    function myFunction(){
        var node = document.createElement('li');
        var value=document.createTextNode("列表3");
        node.appendChild(value);
        document.getElementById('list').appendChild(node);
    }
</script>

2.Node.hasChildNodes() //返回布尔值，表示当前节点是否有子节点

<ul id="list">
    <li id="li1">列表1</li>
    <li>列表2</li>
</ul>
<button onclick="myFunction()">点我</button>
<script type="text/javascript">
    function myFunction(){
        if(document.getElementById("li1").hasChildNodes()){
            alert("有子节点");
        }
        else{
            alert("没有子节点");
        }
    }
</script>

注意：当li标签下有文本节点，返回结果也为true，当文本节点去掉时，返回结果就为false

3.Node.cloneNode(true); // 默认为false(克隆节点), true(克隆节点及其属性，以及后代)

<ul id="list"><li id="li1">列表1</li><li>列表2</li></ul>
<button onclick="myFunction()">点我</button>
<script type="text/javascript">
    function myFunction(){
        var node=document.getElementById('list').firstChild;
        var clone=node.cloneNode(true);
        document.getElementById("list").appendChild(clone);
    }
</script>

4.Node.insertBefore(newNode,oldNode) // 在指定子节点之前插入新的子节点

<ul id="list"><li id="li1">列表1</li><li>列表2</li></ul>
<button onclick="myFunction()">点我</button>
<script type="text/javascript">
    function myFunction(){
        var Nnode=document.createElement("li");
        Nnode.innerHTML="列表0";
        var Onode=document.getElementById("li1");
        document.getElementById("list").insertBefore(Nnode,Onode);
    }
</script>

5.Node.replaceChild(newChild,oldChild) //替换节点

与上述insertBefore代码基本相同

6.Node.contains(node) //返回一个布尔值，表示参数节点是否为当前节点的后代节点。

node.contains( otherNode )  

• node 是否包含otherNode节点.
• otherNode 是否是node的后代节点.

如果 otherNode 是 node 的后代节点或是 node 节点本身.则返回true , 否则返回false.

7.Node.isEqualNode(noe) //返回布尔值，用于检查两个节点是否相等。所谓相等的节点，指的是两个节点的类型相同、属性相同、子节点相同。

<ul id="list"><li id="li">列表</li><li id="li">列表</li></ul>
<ul id="list1"><li id="li">列表1</li><li id="li">列表</li></ul>
<button onclick="myFunction()">点我</button>
<script type="text/javascript">
    function myFunction(){
        var node=document.getElementById("list").firstChild;
        var child=document.getElementById("list1").firstChild;
        if(node.isEqualNode(child)){
            alert("相等");
        }
        else{
            alert("不相等");
        }
    }
</script>

8.Node.normalize() //用于清理当前节点内部的所有Text节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。