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

最新推荐文章于 2024-07-27 06:08:36 发布

输出是最好的学习

最新推荐文章于 2024-07-27 06:08:36 发布

阅读量6.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： JavaScript DOM节点

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.youkuaiyun.com/m0_37568521/article/details/78420438

前端专栏收录该内容

72 篇文章

订阅专栏

这篇博客主要介绍了DOM节点的基本操作，包括通过nodeType和nodeName识别节点类型，使用childNodes获取子节点，利用firstChild、lastChild、nextSibling、previousSibling和parentNode遍历节点，以及如何使用append、insertBefore进行节点添加，replaceChild实现节点替换，和removeChild删除节点。此外，还提及了hasChildNodes属性用于检测节点是否包含子节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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