一、理论基础
1、什么是DOM
DOM全称文档对象模型，浏览器会把HTML全部转换成一个个节点，JS可以通过DOM操作页面标签、文字、样式。整个网页就是一棵节点树。
节点主要分为3类：
1. 元素节点：HTML标签，例如div、p、span、button，最常用。
2. 文本节点：标签里面的文字，包含空格和换行。
3. 属性节点：标签的属性，如class、id、src。
2、理论代码
节点的获取：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM节点的获取</title>
</head>
<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);
// querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
const p5 = document.querySelector(".pp");
console.log(p5);
// querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
const p4 = document.querySelectorAll(".pp");
console.log(p4);
console.log(p4[0]);
console.log(p4[1]);
console.log(p4[2]);
</script>
</body>
</html>
节点的属性修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM节点的属性修改</title>
</head>
<body>
<p class="pp">我是段落1</p>
<p class="pp">我是段落2</p>
<p class="pp" id="p3">我是段落3</p>
<p class="pp xx yy" id="p4">我是段落4</p>
<img src="./img_src/logo.png" alt="图片加载失败" id="img1">
<script>
// 【实验一. 查看元素节点的属性并修改属性】
// 1.根据id获取节点
const p3 = document.getElementById("p3");
console.log(p3);
// 2.查看元素节点的属性
console.log(`p3旧class属性值为： ${p3.className}`);
console.log(`p3旧id属性值为： ${p3.id}`);
// 3.修改节点的class属性
p3.className = "pp jj yy xx";
console.log(`p3新class属性值为： ${p3.className}`);
// 4.修改节点的id属性
p3.id = "_p_3";
console.log(`p3新id属性值为： ${p3.id}`);
// 【实验二. classList对象的操作】
// 根据id获取节点
const p4 = document.getElementById("p4");
console.log(p4.classList);
console.log(p4.classList[0]);
// 为classList添加一个新的class名
p4.classList.add("zz");
console.log(p4.classList);
// 为classList移除一个class名
p4.classList.remove("xx");
console.log(p4.classList);
// 检查classList中是否存在某个class名，返回布尔值。
console.log(p4.classList.contains("jj")); // 不存在，返回false
console.log(p4.classList.contains("zz")); // 存在，返回true
// 【实验三. 其他属性的查看与修改（以<img>标签为例）】
const im = document.getElementById("img1");
console.log("修改前:"+ im.src);
// 修改src属性（即修改资源路径，因此渲染出来的图片会改变）
im.src = "./img_src/logo1.png";
console.log("修改后:"+ im.src);
</script>
</body>
</html>
节点的创建与插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM节点的创建与插入</title>
</head>
<body>
<!– 下面是随便写的一堆html元素节点 –>
<p class="pp">我是段落2</p>
<p class="pp" id="p3">我是段落3</p>
<p class="pp jj yy xx" id="p4">我是段落4</p>
<script>
// 【第1步. 创建节点】
// 1.1 创建一个<p>元素节点
var ele = document.createElement("p");
// 1.2 创建一个文本节点
var txt = document.createTextNode("我是用Javascript创建的新节点");
console.log(txt);
// 1.3 创建一个属性节点并为其赋值
var attr = document.createAttribute("class"); // 创建属性节点
attr.value = "hello world"; // 为属性节点赋值
console.log(attr);
// 【第2步. 插入节点】
// 2.1 将文本节点作为子节点，加入新建的<p>元素节点下面
ele.appendChild(txt);
// 2.2 将属性节点插入新建的<p>元素节点
ele.setAttributeNode(attr);
// 2.3 将已经配置完毕的<p>元素节点，以子节点的身份插入其上一层的<body>元素节点中
const body_node = document.getElementsByTagName("body")[0];
body_node.appendChild(ele);
// 【第3步.删除节点】
// 3.1 获取要删除的节点
const p3 = document.getElementById("p3");
// 3.2 删除节点
body_node.removeChild(p3);
</script>
</body>
</html>
注意：
1. 旧式属性节点写法 createAttribute ，现在更常用简写： ele.className="hello world" 。这段代码是演示原生节点构造方式。
2. removeChild必须由父元素调用，不能直接节点.remove()（虽然也能删除，但这里刻意用了父节点删除的方式）。
3.document.body直接获取页面中的 <body> 标签，等价于 document.getElementsByTagName("body")[0] ，写法更简短。
3、实际应用
效果图
代码
<!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>
<!–
禁止手动修改，必须使用JavaScript操纵DOM实现。练习要求：
1.将第一个<hr>节点改为黑色(即id="hr1"的节点)
2.将第二个<hr>节点从<body>节点中移除(即id="hr2"的节点)
3.创建一个新的节点，如下所示：
<hr color="blue" width="250" id="hr3">
–>
<hr color="red" width="500" id="hr1">
<hr color="green" width="500" id="hr2">
<script>
const hr1=document.getElementById(hr1);
hr1.color="black";
const hr2=document.getElementById("hr2");
hr2.remove();
const hr3 = document.createElement("hr");
hr3.color = "blue";
hr3.width = "250";
hr3.id = "hr3";
document.body.appendChild(hr3);
</script>
</body>
</html>
