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

来源：互联网发布：淘宝人工刷流量网站编辑：程序博客网时间：2024/04/28 11:03

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

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>

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

3、firstChild，lastChild，nextSibling，previousSibling，parentNode的关系（已经淘汰，有更好的方法）

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-1var oDiv1 = document.querySelector("#div1");oDiv1.removeChild(oDiv1.childNodes[3]);

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

阅读全文

0 0