JavaScript学习笔记（五）：HTML DOM 元素 (节点)的增改删查

川长思鸟来 2022-03-26 14:12 131阅读 0赞

### 创建新的 HTML 元素 (节点) - appendChild() / insertBefore() ###

**appendChild() 方法：**

1.通过 document.createElement("p") 创建节点 p 标签（para）；

2.通过 document.createTextNode("段落p3......") 创建新节点内容（node）；

3.通过 appendChild(node) 添加节点内容到创建的标签中；

4.通过 appendChild(para) 添加新节点到父元素中。

**insertBefore() 方法：**

1.通过 document.createElement("p") 创建节点 p 标签（para）；

2.通过 document.createTextNode("段落p4......") 创建新节点内容（node）；

3.通过 appendChild(node) 添加节点内容到创建的标签中；

4.通过 document.getElementById("") 找到另一节点（child）；

5.通过 insertBefore(para, child) 把新节点插入到 child 节点的前面。

/*添加节点*/
    function DOMAddNode() {
        /*创建节点*/
        var para = document.createElement("p"); // 创建标签p
        var node = document.createTextNode("段落p3......"); // 创建节点内容
        para.appendChild(node); // 添加节点内容到创建的标签中
        /*添加新节点到父元素中*/
        /*方法一：默认添加到尾部*/
        var nodediv = document.getElementById("nodediv");
        nodediv.appendChild(para);
    
        /*方法二：自定义添加*/
        var para = document.createElement("p"); // 创建标签p
        var node = document.createTextNode("段落p4......"); // 创建节点内容
        para.appendChild(node); // 添加节点内容到创建的标签中
        var child = document.getElementById("p1");
        nodediv.insertBefore(para, child); // 添加到p1的前边
    }

### 替换 HTML 元素 - replaceChild() ###

1.通过 document.createElement("p") 创建节点 p 标签（para）；

2.通过 document.createTextNode("段落p4......") 创建新节点内容（child）；

3.通过 appendChild(child) 添加节点内容到创建的标签中；

4.通过 document.getElementById("") 找到替换节点的父元素 (elemt) ；

5.通过 document.getElementById("") 找到需要替换的节点(child）；

6.通过  replaceChild(para, child) 替换节点 child 为 para。

/*修改节点*/
    function DOMUpdateNode() {
        /*创建新节点*/
        var para = document.createElement("p"); // 创建标签p
        var child = document.createTextNode("新段落......"); // 创建节点内容
        para.appendChild(child); // 添加节点内容到创建的标签中
        /*替换节点*/
        var elemt = document.getElementById("nodediv"); // 找到父元素
        var child = document.getElementById("p2"); // 找到节点
        elemt.replaceChild(para, child);
    
    }

### 移除 HTML 元素 - removeChild() ###

1.通过 document.getElementById("") 找到替换节点的父元素 (elemt) （注：删除节点必须知道父节点）；

2.通过 document.getElementById("") 找到需要移除的节点(child）；

3.通过 removeChild(child) 移除目标节点。

/*删除节点*/
    function DOMDelNode() {
        var elemt = document.getElementById("nodediv"); // 找到父元素
        var child = document.getElementById("p2"); // 找到节点
        elemt.removeChild(child); // 删除节点
    }

### 查询 HTML 元素 - querySelectorAll() ###

1.通过 document.getElementById("") 找到父元素 (elemt)；

2.通过 querySelectorAll("") 获得所有指定标签（返回 NodeList 对象）；

3.for循环遍历所有指定节点，并改变节点内容的颜色。

/*查询指定节点*/
    function DomQueryNode() {
        var elemt = document.getElementById("nodediv");
        var nodeList = elemt.querySelectorAll("p");
    
        for (var i = 0; i < nodeList.length; i++) {
            nodeList[i].style.color = "#FFF";
        }
    }