JavaScript-DOM编程（节点获取，节点属性修改，节点创建与插入，CSS样式的修改）【新手小白入！！！】

DOM是document object model（文档对象模型的缩写）。DOM提供了一种结构化的方式来访问和更新网页内容，可以动态地添加、删除或修改网页中的元素和属性。使用JavaScript进行DOM编程，可以实现各种交互效果，比如响应用户的点击事件、更新内容、动画效果等。

一、Dom节点获取

在DOM编程中，获取节点可以通过多种方法实现，如 getElementsByTagName、getElementById、getElementsByClassName、querySelector、querySelectorAll等。

getElementsByTagName 通过标签名来获取节点（若有多个相同标签，返回含有多个节点的类数组对象）。例如：先创建3个<p>标签，通过getElementsByTagName获取节点。

html 复制代码

    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
<script>
        const p1 = document.getElementsByTagName("p");  
        console.log(p1);        // p1有多个相同标签，故返回含有多个节点的类数组对象
        console.log(p1[0]);     // 通过下标获取相对应的节点
        console.log(p1[1]);
</script>

结果显示：

getElementsByClassName通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）。例如：先创建3个<p>标签，再添加class属性去获取节点。

html 复制代码

    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
<script>
    // getElementsByClassName 通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）
        const p2 = document.getElementsByClassName("pp");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);
</script>

结果显示：

getElementById通过id名来获取节点（直接返回可操控的节点）。需设置id属性。

html 复制代码

    <p>我是段落1</p>
    <p>我是段落2</p>
    <p id="p3">我是段落3</p>
<script>
        // getElementById 通过id名来获取节点（直接返回可操控的节点）
        const p3 = document.getElementById("p3");
        console.log(p3);
</script>

结果显示：

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

html 复制代码

    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp">我是段落3</p>
<script>
    // querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
        const p4 = document.querySelectorAll(".pp");    // .pp:class 属性
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);
</script>

结果显示：

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

html 复制代码

    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
<script>
        // querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
        // 只返回第一个节点
        const p5 = document.querySelector(".pp");
        console.log(p5);
</script>

结果显示：

二、Dom节点的属性修改

1、查看属性和修改属性

html 复制代码

<p class="pp" id="p3">我是段落3</p>
<script>
        // 1.根据id获取节点 
        const p = document.getElementById("p3");
        console.log(p);
        // 2.查看标签节点的属性
        console.log(p.id);
        console.log(p.className);
        // 3.修改节点的id属性
        p.id = "_p_3";
        console.log(p.id);
        // 4.修改节点的class属性
        p.className = "pp jj yy xx";
        console.log(p.className);
</script>

结果显示：

2、classList对象的操作

classList属性用于返回一个元素的className集合。

1）根据id获取节点

html 复制代码

<p class="pp jj yy xx" id="p4">我是段落4</p>
<script>
        // 根据id获取节点
        const p4 = document.getElementById("p4");
        console.log(p4.classList);
        console.log(p4.classList[0]);
</script>

结果显示：

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

html 复制代码

    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        // 为classList添加一个新的class名
        p4.classList.add("zz");
        console.log(p4.classList);
    </script>

结果显示：

3）为classList移除一个class名

html 复制代码

    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        // 为classList移除一个class名
        p4.classList.remove("xx");
        console.log(p4.classList);
    </script>

结果显示：

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

html 复制代码

    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        // 检查classList中是否存在某个class名，返回布尔值。
        console.log(p4.classList.contains("jj"));
        console.log(p4.classList.contains("zz"));
    </script>

结果显示：

三、Dom节点创建与插入

1、创建节点

**createElement:**创建标签节点

代码显示：

html 复制代码

    <p class="pp jj yy xx" id="p4">我是段落4</p>
<script>
        var p4 = document.createElement("p");
        console.log(p4);
</script>

**createTextNode:**创建文本节点

代码显示：

html 复制代码

    <script>
        var t4 = document.createTextNode("我是文本节点");
        console.log(t4);
</script>

**createAttribute:**创建一个属性节点并为其赋值

代码显示：

html 复制代码

<script>
    //创建一个属性节点并为其赋值
        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值
        console.log(a4);    
</script>

2、插入节点

在DOM（文档对象模型）中插入节点可以通过JavaScript来实现。appendChild 和 setAttributeNode 是两个不同的 DOM 操作方法，分别用于不同的目的。

appendChild方法用于将一个节点添加到指定父节点的子节点列表的末尾。

html 复制代码

 <p class="pp" id="p3">我是段落3</p> 
    <script>
        // 创建一个<p>标签节点
        var p4 = document.createElement("p");
        // 创建一个文本节点
        var t4 = document.createTextNode("我是文本节点");
        // 将文本节点作为子节点，加入新建的<p>标签节点下面
        p4.appendChild(t4);    
        console.log(p4);
    </script>

结果显示：

setAttributeNode方法则是用于设置一个元素的属性。

html 复制代码

    <p>我是段落3</p>
    <script>
        //创建一个<p>标签节点
        var p4 = document.createElement("p");
        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值

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

结果显示：

四、CSS样式的修改

通过 JavaScript 修改 CSS 样式可以非常灵活地控制网页的外观。可以直接访问元素的 style 属性来更改样式，或者通过修改该节点的CSS 代码来改变样式。

先创建一个div盒子，为其设置class和id属性，并为盒子设置样式。原代码显示：

html 复制代码

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

结果显示：

方式1:直接访问元素的 style 属性来更改样式

html 复制代码

<style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;
            
        }
    </style>
<div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        var e = document.getElementById("div1");

        // 方式1:  我自己更常用，觉得更清晰
        e.style.backgroundColor = "red";
        e.style.color = "white";
        e.style.fontSize = "30px";
</script>

结果显示：

方式2:直接修改该节点的CSS代码

html 复制代码

<style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;
            
        }
    </style>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        var e = document.getElementById("div1");
        // 方式2:  直接修改该节点的CSS代码
        // 利用反引号来解决过长字符串的换行问题，以提高阅读性
        // 如何在键盘中输入反引号：英文输入法下，按左上角那个键
        e.style.cssText = 
        `
            background-color: gray; 
            color:green;
            font-size: 50px;
        `;

    </script>
</body>

结果显示：