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

最新推荐文章于 2022-12-09 19:01:31 发布

原创最新推荐文章于 2022-12-09 19:01:31 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#appendChild #insertBefore #replaceChild #removeChild #querySelectorAll

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript操作HTML元素，包括创建、替换、移除节点以及查询特定元素的方法。通过appendChild(), replaceChild(), removeChild()和querySelectorAll()等API，读者可以学习到如何动态地修改网页内容。

创建新的 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";
    }
}