Dom(六)——节点Node

有关节点的各种属性和方法

1. nodeName 节点名称，是什么标签就显示是哪种类型的标签
2. nodeName，如果是文本类型的那么就返回#text
3. nodeType 节点类型，返回的是节点类型代码1，2，3，8

• Node.ELEMENT_NODE (1) 元素节点
• Node.ATTRIBUTE_NODE (2) 属性节点
• Node.TEXT_NODE (3) 文本节点
• Node.COMMENT_NODE (8) 注释节点

4. nextSibling 下一个兄弟节点
5. previousSibling 前一个兄弟节点
6. previousElementSibling 前一个兄弟元素节点
7. creatElement('标签名') 创建节点
8. removeChild(OA) 删除节点
9. appendChild（OA）在最末尾插入节点
10. insertBfore(oa.op) oa在op之前插入
11. replaceChild（oa,op）oa替换掉op
12. setAttribute（'index',1）设置属性
13. getAttribute（'index'）获取属性

代码

 <div>
        哈哈哈哈哈
        <p>社会主义好</p>
    </div>
    <p id="hah">dfja</p>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv.nodeName,oDiv.nodeType)
        
        var a = oDiv.firstChild
        console.log(a.nodeName,a.nodeType)
        console.log(oDiv.nextElementSibling)

        var ha = document.getElementById("hah")
        
        var ob = document.createElement('div')
        ob.innerHTML = "Aiors最棒"
        oDiv.appendChild(ob)
        
        console.log(ob)

        console.log(ob.previousElementSibling)
        
        var oa = document.createElement("p")
        oa.innerHTML = "反倒是卡法比利时"
        oDiv.replaceChild(oa,ob)

        oDiv.setAttribute("index",1)
        console.log(oDiv.getAttribute("index"))
        // 通过setAttribute设置属性剋在HTML结构中看到



        


        


    </script>

克隆节点

cloneNode（true）,如果是true的话，克隆的时候会包含子节点，如果没有true那么克隆的时候只包含要克隆的节点不包括子节点

<ul id="wrapper">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
    var oWrapper = document.getElementById("wrapper");
    var u = oWrapper.cloneNode(true)
    console.log(u)

    var b = oWrapper.cloneNode();
    console.log(b)

此外这里还需要注意，appendChild对于插入节点的问题，他的特殊之处在于，如果是通过creatElement创建的节点那么可以正常插入如果是原来就存在的话，那么没插入一个就会删除待插入的元素。

  <ul id="wrapper">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
    var oWrapper = document.getElementById("wrapper");
    var u = oWrapper.cloneNode(true)
    console.log(u)

    var b = oWrapper.cloneNode();
    console.log(b)

    var ali = u.getElementsByTagName('li')

    for(var i = 0;i<ali.length;i++){
        oWrapper.appendChild(ali[i])
    }

    </script>

会产生如下情况

appendChild正确操作

 for(var i=0; i<aLi.length; i++) {
      oWrapper.appendChild(aLi[i].cloneNode());
    }

如果cloneNode（）里面没有任何参数

    for(var i=0; i<aLi.length; i++) {
      oWrapper.appendChild(aLi[i].cloneNode());
    }