JS DOM节点的获取、创建、插入、属性修改等操作

原创于 2025-09-15 21:26:15 发布 · 383 阅读

CC 4.0 BY-SA版权

文章标签：

一、DOM节点的获取：

①.getElementsByTagName 通过标签名来获取元素节点（若有多个相同标签，返回含有多个节点的类数组对象）

②.getElementsByClassName 通过class名来获取元素节点（若有多个相同class，返回含有多个节点的类数组对象）

③.getElementById 通过id名来获取元素节点（直接返回可操控的节点，而不是由节点构成的数组对象）

④.querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）

⑤.querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点

<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
 
    <script>
        // getElementsByTagName 通过标签名来获取元素节点 （若有多个相同标签，返回含有多个节点的类数组对象）
        const p1 = document.getElementsByTagName("p");  
        console.log(p1);
        console.log(p1[0]);
        console.log(p1[1]);
        // getElementsByClassName 通过class名来获取元素节点（若有多个相同class，返回含有多个节点的类数组对象）
        const p2 = document.getElementsByClassName("pp");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);
        // getElementById 通过id名来获取元素节点（直接返回可操控的节点，而不是由节点构成的数组对象）
        const p3 = document.getElementById("p3");
        console.log(p3);
        // querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
        const p4 = document.querySelectorAll(".pp");
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);
        // querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
        const p5 = document.querySelector(".pp");
        console.log(p5);
    </script>
    
</body>

二、DOM节点的创建与插入

①创建节点：

1 . document.createElement(); 创建一个元素节点；

2 . document.createTextNode(); 创建一个文本节点；

3.document.createAttribute();创建一个属性节点......

②插入节点：

1.将创建文本节点作为子节点，加入新建的元素节点下面：div.appendChild(XX); （div为元素节点，XX为文本节点）

2.将属性节点插入新建的元素节点: div.setAttributeNode(XX);（div为元素节点，XX为属性节点）

3.将已经配置完毕的元素节点，以子节点的身份插入其上一层的<body>元素节点中:

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

body_node.appendChild(div);

删除节点：

body_node.removeChild(div);

这是直接插入到body的代码：document.body.appendChild(div);

最后实操

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点的相关操作</title>
</head>
<body>
    <hr color="red" width="500" id="hr1">
    <hr color="green" width="500" id="hr2">
    <script>
        const body_node = document.getElementsByTagName("body")[0];        
        // 1. 将第一个<hr>节点改为黑色(即id="hr1"的节点)
        const hr1 = document.getElementById('hr1');
        hr1.color = 'black';
 
        // 2. 将第二个<hr>节点从<body>节点中移除(即id="hr2"的节点)
        const hr2 = document.getElementById('hr2');
        body_node.removeChild(hr2);
 
        // 3. 创建一个新的节点：<hr color="blue" width="250" id="hr3">
        const hr3 = document.createElement('hr');
        hr3.color = 'blue';
        hr3.width = '250';
        hr3.id = 'hr3';
        
        // 将新创建的节点添加到body中
        body_node.appendChild(hr3);
    </script>
</body>
</html>