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

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

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

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

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

如果是普通的元素节点，也就是div，p等，那么nodeType的值就是1，如果是文本节点，也就是元素节点中的具体内容，那么nodeType的值就是3。

2、每一个节点都有childNodes属性，返回的是一个NodeList，通过下面的例子，我们可以获取到所有的子节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>welcome</title>
  6.     <style> </style>
  7. </head>
  8. <body>
  9.     <div id="div1">
  10.         <p>1</p>
  11.         <p>2</p>
  12.         <p>3</p>
  13.         <p>4</p>
  14.         <p>5</p>
  15.         <p>6</p>
  16.     </div>
  17.     <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>
  18. </body>
  19. </html>

其中结果如下：
这里写图片描述

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

  1. //追加节点
  2. var oDiv1 = document.querySelector("#div1");
  3. var oP = document.createElement("p");
  4. oP.innerHTML = "1";
  5. oDiv1.appendChild(oP);
  7. //指定位置插入节点
  9. /*插入最后，和append的效果一样*/
  10. var oDiv1 = document.querySelector("#div1");
  11. var oP = document.createElement("p");
  12. oP.innerHTML = "a";
  13. oDiv1.insertBefore(oP,null);
  14. /*插入最前面*/
  15. var oDiv1 = document.querySelector("#div1");
  16. var oP = document.createElement("p");
  17. oP.innerHTML = "a";
  18. oDiv1.insertBefore(oP,oDiv1.firstChild);
  19. /*插入第二个节点*/
  20. var oDiv1 = document.querySelector("#div1");
  21. var oP = document.createElement("p");
  22. oP.innerHTML = "a";
  23. oDiv1.insertBefore(oP,oDiv1.childNodes[2]);

6、节点的替换replaceChild

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

7、节点的删除removeChild

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

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

发表评论

表情：
评论列表 （有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaScript DOM 删除子节点

    这些天一直在学习JavaScript，但由于工作繁忙，导致学习的兴致不高，一个对象都看了好几天视频，所以想以写博客的方式督促自己，希望能做到不管什么知识，每日一更。 一个元

    快来打我*快来打我*/ 0 赞/ 661 阅读

    相关 DOM删除节点

    一 介绍 删除节点通过使用removeChild()方法来实现。 removeChild()方法用来删除一个子节点。 obj. removeChild(oldChild)

    Bertha 。Bertha 。/ 0 赞/ 448 阅读