当前位置：首页 > article >正文

清晰易懂的JavaScript进阶部分——DOM操作（节点获取，节点属性修改，节点创建与插入，CSS样式的修改）

article 2025/1/11 6:57:24

DOM操作（Document Object Model 文档对象模型）指的是通过JavaScript来操作网页的结构和内容。DOM提供了一种以文档树形式表示HTML或XML文档的方式，可以使用JavaScript来访问和修改网页的元素、属性和文本内容，且提供了一系列的函数和对象来实现增、删、改、

一、节点

DOM节点是HTML文档中的各个元素和文本的表示。在DOM树中，每个元素、文本和注释都被表示为一个节点对象。DOM节点是一个对象，它有属性和方法用于操作和控制该节点。

DOM节点可以分为以下几种类型：

元素节点（Element Node）：表示HTML文档中的HTML元素，如<div>、<p>等。元素节点可以有子节点和属性。通过标签名来访问元素节点。

文本节点（Text Node）：表示HTML文档中的文本内容，如文本节点内的文字、空格等。文本节点是元素节点的子节点，通过textContent属性来访问文本节点的内容。

属性节点（Attribute Node）：表示HTML元素的属性，如class、id、src等。属性节点是元素节点的属性，通过getAttribute()和setAttribute()方法来获取和设置属性的值。

文档节点（Document Node）：表示整个HTML文档，即根节点。文档节点是最顶层的节点，可以通过document对象来访问。

现在知道了解了节点，接下来可以通过操作DOM节点，可以实现对HTML文档的增删改查等操作，灵活控制页面的内容和样式。

二、节点的获取

在JavaScript中，可以使用各种方法来获取DOM节点。以下通过例子来展示一些常见的方法：

在htm页面l<body>标签下创建三个p标签，接下来通过操作JS来展示方法：

    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

1. getElementsByTagName(tagName)：通过元素的标签名获取节点。该方法返回一个节点列表，表示所有具有指定标签名的元素（若有多个相同标签，返回含有多个节点的类数组对象）。

例如：

        const p1 = document.getElementsByTagName("p");  
        console.log(p1);
        console.log(p1[0]);
        console.log(p1[1]);

运行结果:

2. getElementsByClassName(className)：通过元素的类名获取节点。该方法返回一个节点列表，表示所有具有指定类名的元素（若有多个相同class，返回含有多个节点的类数组对象）。

例如：

        const p2 = document.getElementsByClassName("pp");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);

运行结果:

3. getElementById(id)：通过元素的id属性获取节点。该方法返回一个节点对象，该对象表示具有指定id的元素。

例如：

        const p3 = document.getElementById("p3");
        console.log(p3);

运行结果:

4. querySelector(selector)：通过CSS选择器获取单个节点。该方法返回一个节点对象，表示匹配指定CSS选择器的第一个元素（返回第一个匹配上的节点）。

例如：

        const p5 = document.querySelector(".pp");
        console.log(p5);

运行结果:

5. querySelectorAll(selector)：通过CSS选择器获取多个节点。该方法返回一个节点列表(NodeList对象)，表示匹配指定CSS选择器的所有元素（包含所有匹配给定选择器的节点）。

例如：

        const p4 = document.querySelectorAll(".pp");
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);

运行结果:

6. parentNode：通过节点的parentNode属性获取其父节点。（补充）

例如：

        var childNode = document.getElementById("p3");
        var parentNode = childNode.parentNode;
        console.log(parentNode); // 输出父节点对象

        // 修改父节点的样式
        parentNode.style.backgroundColor = "red";

运行结果:

<body>标签背景样式也变成了红色

7. childNodes：通过节点的childNodes属性获取其子节点列表。（补充）

例如：

        var parentNode = document.getElementById("p3");
        var childNodes = parentNode.childNodes;
        console.log(childNodes); // 输出子节点的集合

运行结果:

三、节点的属性修改

要修改节点的属性，可以通过以下几种方式，下面通过实例来展示：

实验一、查看属性和修改属性

首先在htm页面l<body>标签下创建节点以供操作

 <p class="pp" id="p3">我是段落3</p>

1.根据id获取节点

        const p = document.getElementById("p3");
        console.log(p);

通过getElementById方法获取了一个id为"p3"的节点对象，由控制台输出

2.查看标签节点的属性

        console.log(p.id);
        console.log(p.className);

由控制台输出节点对象的id属性（id）和class属性（className）

3.修改节点的id属性

3.1 直接通过节点对象的属性来进行修改

        p.id = "_p_3";
        console.log(p.id);

3.2 使用setAttribute方法来修改节点的属性。这个方法接受两个参数，第一个参数是要修改的属性名，第二个参数是要修改的属性值

        p.setAttribute("id", "newId");
        console.log(p.id);

4.修改节点的class属性

        p.className = "pp jj yy xx";
        console.log(p.className);

实验二、 classList对象的操作

首先在htm页面l<body>标签下创建节点以供操作

<p class="pp jj yy xx" id="p4">我是段落4</p>

1.根据id获取节点

通过getElementById方法获取了一个id为"p4"的节点对象

        const p4 = document.getElementById("p4");
        console.log(p4.classList);
        console.log(p4.classList[0]);

2.为classList添加一个新的class名

        p4.classList.add("zz");
        console.log(p4.classList);

3.为classList移除一个class名

        p4.classList.remove("xx");
        console.log(p4.classList);

4. 检查classList中是否存在某个class名，返回布尔值。

        console.log(p4.classList.contains("jj"));
        console.log(p4.classList.contains("xx"));

实验三.、其他属性的查看与修改（以<img>标签为例）

首先在htm页面l<body>标签下创建节点以供操作

    <img src="./img_src/logo.png" alt="图片加载失败" id="img1">

通过getElementById方法获取了一个id为"img1"的节点对象，

然后使用 i.src = "./img_src/logo1.png"修改

        const i = document.getElementById("img1");  
        i.src = "./img_src/logo1.png";    // 修改src属性

四、节点的创建与插入

创建节点

1. createElement(tagName): 创建一个具有指定标签名的元素节点。

示例：

        //创建一个<p>标签节点
        var p4 = document.createElement("p");

2. createTextNode(text): 创建一个包含指定文本内容的文本节点。

示例：

        //创建一个文本节点
        var t4 = document.createTextNode("我是段落5");

3. createAttribute(attribute)：用于创建一个属性节点。

示例：

        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值

插入节点

1. appendChild(node): 将一个节点插入到另一个节点的子节点列表的末尾。

示例：

        //将文本节点作为子节点，加入新建的<p>标签节点下面
        p4.appendChild(t4);

2. setAttributeNode(node)：将一个属性节点添加到元素节点中。

示例：

        //将属性节点插入新建的<p>标签节点
        p4.setAttributeNode(a4);

通过getElementsByTagName方法获取了一个标签为"body"的节点对象，将已经配置号的<p>标签节点，作为子节点，插入body节点中


        const body_node = document.getElementsByTagName("body")[0];
        body_node.appendChild(p4);

这样一个节点就创建好啦！

五、CSS样式的修改

要修改元素的CSS样式，可以使用元素的style属性。style属性是一个对象，可以通过其属性来修改元素的CSS样式。

示例：

首先创建节点及其属性以供操作

<head>
    <style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;            
        }
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
</body>

首先通过document.getElementById方法获取到id为"div1"的元素。然后，通过元素的style属性来修改元素的背景颜色、文字颜色和字体大小。可以直接给style属性的属性赋值，将其值设置为对应的CSS样式值。

        var e = document.getElementById("div1");
        e.style.backgroundColor = "red";
        e.style.color = "white";
        e.style.fontSize = "30px";

运行结果：

还有另一种方法也可以修改CSS样式：直接修改该节点的CSS代码

利用反引号来解决过长字符串的换行问题，以提高阅读性（反引号：英文输入法下，按左上角那个键）

        var e = document.getElementById("div1");
        e.style.cssText = 
        `
            background-color: gray; 
            color:green;
            font-size: 50px;
        `;

运行结果：