DOM节点的增加，删除，修改，查找

向右看齐 2022-06-06 06:59 262阅读 0赞

#### 前言：最近开始晚睡了，不知道为什么睡不太着，有时候有一些莫名的压力感，有时候又有一些莫名的兴奋感。今天看完了《下一个倒下的会不会是华为》，对于华为的整个企业的文化和发展都有一个全新的认识，但是让自己感悟更加深刻地则是华为的狼性文化，垫子文化。还是步入正题吧… ####

1、每一个节点都有nodeType属性，表面节点的类型。我们通过nodeType的具体值来判断具体是什么节点。此外每个节点也都有nodeName属性，获取节点的名称。下面通过一个简单的例子说明

var oDiv1 = document.querySelector("#div1");
    console.log(oDiv1.nodeName+"--"+oDiv1.nodeType); //DIV--1

如果是普通的元素节点，也就是div，p等，那么nodeType的值就是1，如果是文本节点，也就是元素节点中的具体内容，那么nodeType的值就是3。  
  
  
2、每一个节点都有childNodes属性，返回的是一个NodeList，通过下面的例子，我们可以获取到所有的子节点

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>welcome</title>
        <style> </style>
    </head>
    <body>
        <div id="div1">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
        </div>
        <script> window.onload = function() { var oDiv1 = document.querySelector("#div1"); for(var i=0; i < oDiv1.childNodes.length; i++) { if(oDiv1.childNodes[i].nodeType === 1) { console.log(oDiv1.childNodes[i]); } } } </script>
    </body>
    </html>

其中结果如下：  
![这里写图片描述][SouthEast]  
  
  
3、firstChild，lastChild，nextSibling，previousSibling，parentNode的关系（已经淘汰，有更好的方法）  
![这里写图片描述][SouthEast 1]  
4、hasChildNodes属性  
判断该节点是否有叶子节点。  
5、节点的增加append , insertBefore

//追加节点
    var oDiv1 = document.querySelector("#div1");
    var oP = document.createElement("p");
    oP.innerHTML = "1";
    oDiv1.appendChild(oP);
    
    //指定位置插入节点
    
    /*插入最后，和append的效果一样*/
    var oDiv1 = document.querySelector("#div1");
    var oP = document.createElement("p");
    oP.innerHTML = "a";
    oDiv1.insertBefore(oP,null);
    /*插入最前面*/
    var oDiv1 = document.querySelector("#div1");
    var oP = document.createElement("p");
    oP.innerHTML = "a";
    oDiv1.insertBefore(oP,oDiv1.firstChild);
    /*插入第二个节点*/
    var oDiv1 = document.querySelector("#div1");
    var oP = document.createElement("p");
    oP.innerHTML = "a";
    oDiv1.insertBefore(oP,oDiv1.childNodes[2]);

6、节点的替换replaceChild

//替换第二个节点，这里要注意节点的类型。(第一种方法)
    var oDiv1 = document.querySelector("#div1");
    var oP = document.createTextNode("a");
    oDiv1.replaceChild(oP,oDiv1.childNodes[3]);
    
    //替换第二个节点(第二种方法)
    var oDiv1 = document.querySelector("#div1");
    var oP = document.createElement("p");
    oP.innerHTML = "a";
    oDiv1.replaceChild(oP,oDiv1.childNodes[3]);

7、节点的删除removeChild

//同样需要注意节点的类型,所以下标是移除节点的2n-1
    var oDiv1 = document.querySelector("#div1");
    oDiv1.removeChild(oDiv1.childNodes[3]);

节点的复制不太清除具体用在哪里，暂时就不总结了

[SouthEast]: /images/20220606/463d8fdc6d5442168fc9d5b6bf9ccd7f.png
[SouthEast 1]: /images/20220606/063fa4b1d675453e8d20cdb695ba599a.png