JavaScript 实战技巧：让你成为前端高手的必备知识3（进阶版）

一、DOM概述

（一）DOM操作

是指使用‌JavaScript操作文档对象模型（Document Object Model）的过程。‌文档对象模型是一种表示网页文档结构的方式，它将整个网页文档表示为一个树形结构，每个元素都是一个节点，包括元素节点、文本节点、属性节点等。通过DOM操作，可以动态地改变网页的内容、结构和样式，实现与用户的交互以及动态更新页面内容。常见的DOM操作包括创建、删除、修改元素，获取和设置元素的属性和内容，以及添加事件监听器等。

可以这么理解，DOM操作就是为了用JS程序代替人工直接修改HTML和CSS代码。

（二）DOM Tree

浏览器会根据DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree)

1、最常用的节点类型

（1）文档节点（Document Nodes）

用于表示整个HTML文档，也称为根节点，通常通过document对象访问。虽然文档节点本身不常进行增删改操作，但它提供了对整个文档的访问，是DOM操作的起点。

（2）元素节点（Element Nodes）

用于表示HTML元素，如<div>、<p>等。可以通过document.createElement()方法创建元素节点，并使用appendChild()、insertBefore()等方法将其添加到DOM树中。

（3）属性节点（Attribute Nodes）

用于表示HTML元素的属性，如class、id等。虽然属性节点不是DOM树的一部分（它们存在于元素的attributes属性中），但可以通过element.setAttribute()方法设置元素的属性值。

（4）文本节点（Text Nodes）

用于表示元素节点中的文本内容。可以通过document.createTextNode()方法创建文本点，并使用appendChild()等方法将其添加到元素节点中。

2、节点间的关系：

节点具有父子关系和同级关系等。除了根元素没有父节点，其他元素都有父节点，一个父节点可以有多个子节点

二、DOM操作

（一）获取节点

1、通过标签名获取节点（getElementsByTagName方法）：

搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组的对象（HTMLCollection实例）。如果没有任何匹配的元素，就返回一个空集。‌

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

    <script>

        // getElementsByTagName 通过标签名来获取节点 （若有多个相同标签，返回含有多个节点的类数组对象）
        const p1 = document.getElementsByTagName("p");  
        console.log(p1[0]);//输出p标签的第一个
        console.log(p1[1]);//输出p标签的第二个
        console.log(p1[2]);//输出p标签的第三个
        
    </script>
    
</body>

2、通过类名获取节点（`document.getElementsByClassName()`方法）‌：

获取具有指定类名的所有节点。返回一个类似数组的对象（HTMLCollection实例），包括
了所有class名字符合指定条件的元素。

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

3、通过ID获取节点‌（`document.getElementById()`方法）：

获取具有指定ID的单个节点，直接返回匹配指定id属性的元素节点（而不是类似数组的对象）。

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

    <script>
        // // getElementById 通过id名来获取节点（直接返回可操控的节点）
        const p3 = document.getElementById("duanluo3");
        console.log(p3);
    </script>
    
</body>

4、通过选择器获取节点‌（`document.querySelector()`方法）：

获取第一个匹配的元素，。接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有
多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null

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

5、获取所有匹配的元素（`document.querySelectorAll()`方法）：

获取所有匹配的元素。与querySelector 用法类似，区别是返回一个NodeList 对象，包含
所有匹配给定选择器的节点

 const p4 = document.querySelectorAll(".pp");
 console.log(p4);

（二）属性的查看与修改

1、id 属性：

来读写当前元素节点的 id 名。

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

2、className 属性：

用来读写当前元素节点的 class 名。

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

3、classList 属性是一个对象，有下列方法：

add() ：增加一个 class 名。

remove() ：移除一个 class 名。

contains() ：检查当前元素是否包含某个 class 名，返回布尔值。

        // 为classList添加一个新的class名
        p4.classList.add("xx");
        console.log(p4.classList);
        // 为classList移除一个class名
        p4.classList.remove("ww");
        console.log(p4.classList);
        // 检查classList中是否存在某个class名，返回布尔值。
        console.log(p4.classList.contains("xx"));
        console.log(p4.classList.contains("ww"));

4、innerHTML：

返回一个字符串，等同于该元素包含的所有HTML代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括 <HTML> 和 <body> 元素。

5、innerText：

和innerHTML类似，不同的是innerText无法识别元素，会直接渲染成字符串。

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

<body>

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

    <script>
        const i = document.getElementById("img1");  
        console.log("修改前:"+ i.src);
        i.src = "./img_src/logo1.png";    // 修改src属性
        console.log("修改后:"+ i.src);
    </script>

（三）新节点的创建与插入

1、新节点的创建

（1）生成标签节点（createElement 方法）

创建一个新的HTML元素，用来生成标签节点，并返回该节点。

var p4 = document.createElement("p");

（2）生成文本节点（createTextNode 方法）

用来生成文本节点，并返回该节点。它的参数是文本节点的内容。

var t4 = document.createTextNode("我是段落");

（3）生成属性节点（createAttribute 方法）

生成一个新的属性节点，并返回该节点。可通过该节点的value属性，对其赋值。

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

2、新节点的插入

（1）增加子节点（appendChild ）

为标签节点增加子节点。将新节点插入到某个父元素的子元素列表的末尾。例如，将新的 <div> 插入到 <body> 的末尾。

 p4.appendChild(t4);

（2）插入属性节点（setAttributeNode ）

为标签节点插入属性节点，比如name，class，id, style等。若此属性节点已经设置到别的元素节点，则控制台会报错。

p4.setAttributeNode(a4);

（3）将已经配置号的<p>标签节点，作为子节点，插入body节点中

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

三、定时器函数

（一）setInterval 函数

指定某个任务每隔一段时间就执行一次（无限次的定时执行）

<script>

        function func(){
            console.log("定时任务：叫朋友起床");
        }
        setInterval(func,2000);//每隔2000ms执行一次定时任务
    </script>

（二）setTimeout 函数

用来指定某个函数，在多少毫秒之后执行(仅执行一次)。它返回一个整数表示定时器的编号，如果突然想撤销这个定时任务，可以用这个编号取消。若要定时执行多次，只需多次调用setTimeout 即可。

1、执行一次定时

<script>

        function func(){
            console.log("定时任务：叫朋友起床");
        }
        setTimeout(func,2000);//2秒以后（仅仅）执行一次定时任务
    </script>

2、执行一次定时，临时想撤销这个定时任务

<script>

        function func(){
            console.log("定时任务：叫朋友起床");
        }
        const id = setTimeout(func,5000);//5秒以后（仅仅）执行一次定时任务
        clearTimeout(id);//临时有事，取消定时任务
    </script>

四、CSS样式操作

（一）修改节点style下面的属性

直接独立修改节点style下面的各种属性
注意：属性名与CSS键名有区别，主要是小写变大写

如下，修改背景颜色和字体颜色

修改前：

修改后：

代码如下：

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

（二）修改节点的CSS代码（通过反引号实现）

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

代码如下：

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