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>