JavaScrip——DOM操作

师从小k

于 2024-11-04 23:04:55 发布

阅读量2.2k

点赞数 61

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/2301_81426182/article/details/143492738

版权

一、节点

二、节点的获取

1. getElementsByTagName(tagName)

2. getElementsByClassName(className)

编辑 3. getElementById(id)

4. querySelector(selector)

5. querySelectorAll(selector)

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

4.修改节点的class属性

实验二、 classList对象的操作

1.根据id获取节点

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

3.为classList移除一个class名

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

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

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

一、节点

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文档的增删查改，以及灵活控制页面的内容和样式。

二、节点的获取

以下通过例子来展示一些常见的方法，在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 abc = childNode.parentNode;
        console.log(abc); // 输出父节点对象         
        // 修改父节点的样式
        abc.style.backgroundColor = "red";

运行结果：

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

7. childNodes

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

例如：

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

运行结果：

三、节点的属性修改

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

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

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

<p class="pp" id="p1">我3杀寂寞独角戏</p>

1.根据id获取节点

例如：

        const pe=document.getElementById("p1");
        console.log(pe);

运行结果：

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

2.查看标签节点的属性

        const p=document.getElementById("p1");
        console.log(p.id);
        console.log(p.className);

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

3.修改节点的id属性

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

例如：

        const p=document.getElementById("p1");
        p.id = "_p_3";
        console.log(p.id);

运行结果：

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

例如：

        const p=document.getElementById("p1");
        p.setAttribute("id", "newId");
        console.log(p.id);

运行结果：

4.修改节点的class属性

例如：

        const p=document.getElementById("p1");
        p.className = "pp jj yy xx";
        console.log(p.className);

运行结果：

实验二、 classList对象的操作

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

    <p class="pp jj yy xx" id="p4">罗比重度依赖</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="囚徒.jpg" alt="图片加载失败" id="img1">

通过getElementById方法获取了一个id为"img1"的节点对象，然后使用 i.src = "./img_src/logo1.png"修改

        const i = document.getElementById("img1");  
        i.src = "小屁孩.jpg";    // 修改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);

这样一个节点就创建好了

查看节点：

        console.log(p4);

五、CSS样式的修改

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

示例：

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

<style>
            .box{
                width: 50%;
                height: 200px;
                background-color: aliceblue;
                color:brown
            }
        </style>
<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;
        `;

运行结果：