JS的DOM操作 （节点获取，节点属性修改，节点创建与插入，CSS样式的修改）
DOM（Document Object Model）即文档对象模型，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是文档的一部分，比如元素节点（对应 HTML 标签）、文本节点、属性节点等。通过 DOM，JavaScript 可以动态地访问、修改和创建网页的内容、结构以及样式。
（注：按F12可以调出控制台）
一、DOM操作的节点获取
DOM操作中节点获取是指通过特定的方法和属性，在 HTML 或 XML 文档的 DOM 树结构中定位并获取到所需的节点元素，以便后续对这些节点进行读取、修改、删除、添加子节点等各种操作
1、getElementsByTagName 通过标签名来获取节点 （若有多个相同标签，返回含有多个节点的类数组对象）
<!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>
const p1 = document.getElementsByTagName("p");
console.log(p1);
console.log(p1[0]);
console.log(p1[1]);
</script>
</body>
</html>
运行结果：
2、getElementsByClassName 通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）
<!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>
const p2 = document.getElementsByClassName("pp");
console.log(p2);
console.log(p2[0]);
console.log(p2[1]);
console.log(p2[2]);
</script>
</body>
</html>
运行结果：
3、getElementById 通过id名来获取节点（直接返回可操控的节点）
<!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>
const p3 = document.getElementById("p3");
console.log(p3);
</script>
</body>
</html>
运行结果:
4、querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
<!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>
const p4 = document.querySelectorAll(".pp");
console.log(p4);
console.log(p4[0]);
console.log(p4[1]);
console.log(p4[2]);
</script>
</body>
</html>
运行结果：
5、querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
<!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>
const p5 = document.querySelector(".pp");
console.log(p5);
</script>
</body>
</html>
运行结果：
二、DOM操作的节点属性修改
在 DOM 操作里，节点属性修改指的是对 DOM 树中各个节点所具有的属性进行更改的一系列操作
1、查看属性和修改属性
<!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 jj yy xx" id="p4">我是段落4</p>
<img src="./img_src/微信图片_20241109181233.jpg" alt="图片加载失败" id="img1" width="25%" height="300px">
<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>
</body>
</html>
运行结果：
2、classList对象的操作
<!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 jj yy xx" id="p4">我是段落4</p>
<img src="./img_src/微信图片_20241109181233.jpg" alt="图片加载失败" id="img1" width="25%" height="300px">
<script>
// 根据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"));
// console.log(p4.classList.contains("zz"));
</script>
</body>
</html>
运行结果：
3 、其他属性的查看与修改（以<img>标签为例）
<!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 jj yy xx" id="p4">我是段落4</p>
<img src="./img_src/微信图片_20241109181233.jpg" alt="图片加载失败" id="img1" width="25%" height="300px">
<script>
const i = document.getElementById("img1");
console.log("修改前:"+ i.src);
i.src = "./img_src/微信图片_20241109175518.jpg"; // 修改src属性
console.log("修改后:"+ i.src);
</script>
</body>
</html>
修改前运行结果：
修改后运行结果：
三、DOM操作的节点创建与插入
在DOM中，节点创建是指通过编程的方式动态地生成新的 DOM 节点元素的过程。这些新创建的节点可以是各种类型，比如元素节点（如<div>、<p>等）、文本节点、属性节点等
<!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">我是段落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 p4 = document.createElement("p");
// 1.2 创建一个文本节点
var t4 = document.createTextNode("我是段落5");
console.log(t4);
// 1.3 创建一个属性节点并为其赋值
var a4 = document.createAttribute("class"); // 创建属性节点
a4.value = "fruit"; // 为属性节点赋值
console.log(a4);
// 2. 插入节点
// 2.1 将文本节点作为子节点，加入新建的<p>标签节点下面
p4.appendChild(t4);
// 2.2 将属性节点插入新建的<p>标签节点
p4.setAttributeNode(a4);
// 2.3 将已经配置号的<p>标签节点，作为子节点，插入body节点中
const body_node = document.getElementsByTagName("body")[0];
body_node.appendChild(p4);
</script>
</body>
</html>
运行结果：
四、DOM操作的CSS样式的修改
DOM操作中对 CSS 样式的修改，指的是通过 JS 代码来动态地改变 HTML 文档中元素的 CSS 样式属性，从而实现对页面外观和布局的实时调整
下面是未做任何修改的原本的代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</body>
</html>
运行结果：
第1种修改方式：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 = "red";
e.style.color = "white";
e.style.fontSize = "30px";
</script>
</body>
</html>
运行结果：
第2种方式：直接修改该节点的CSS代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</html>
运行结果：
