JavaScript 的 DOM（Document Object Model，文档对象模型）是一种用于表示和操作 HTML 或 XML 文档的编程接口。DOM 将整个文档建模为一个由节点和对象组成的树结构，使得开发者可以通过 JavaScript 来访问和修改文档的内容、结构和样式。
一、DOM节点
DOM节点指的是文档对象模型（DOM）中的元素、属性和文本等实体，它们构成了网页中的树形结构。DOM节点包括以下几种常见类型：
元素节点（Element Node）：代表HTML元素，例如
<div>、<p>等。属性节点（Attribute Node）：代表HTML元素的属性，例如
class、id等。文本节点（Text Node）：代表HTML元素中的文本内容，例如
<p>这是一段文本</p>中的"这是一段文本"。注释节点（Comment Node）：代表HTML注释，例如
<!-- 这是一个注释 -->。文档节点（Document Node）：代表整个HTML文档，是DOM树的根节点。
文档类型节点（Document Type Node）：代表HTML文档的类型声明，例如
<!DOCTYPE html>。
DOM节点通过层级关系组成了树状结构，可以通过JavaScript等编程语言来操作和访问这些节点，实现对网页的动态交互和内容修改。
二、节点的获取
JavaScript获取DOM节点的方法有许多种，以下是一些常用的获取方法：
通过在body标签创建的p标签为例
<p class="pp">我是段落1</p>
<p class="pp">我是段落2</p>
<p class="pp" id="p3">我是段落3</p>1.getElementsByTagName 通过标签名来获取节点 （若有多个相同标签，返回含有多个节点的类数组对象）
const p1 = document.getElementsByTagName("p");
console.log(p1);
console.log(p1[0]);
console.log(p1[1]);运行结果：
2.getElementsByClassName 通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）
const p2 = document.getElementsByClassName("pp");
console.log(p2);
console.log(p2[0]);
console.log(p2[1]);
console.log(p2[2]);运行结果：
3.getElementById 通过id名来获取节点（直接返回可操控的节点）
const p3 = document.getElementById("p3");
console.log(p3);运行结果：
4.querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
const p4 = document.querySelectorAll(".pp");
console.log(p4);
console.log(p4[0]);
console.log(p4[1]);
console.log(p4[2]);运行结果：
5.querySelector 通过CSS选择器获取节点，（返回匹配的第一个节点）
const p5 = document.querySelector(".pp");
console.log(p5);运行结果：
三、节点属性的修改
在 JavaScript 中，修改 DOM 节点的属性是常见的操作之一。通过修改节点的属性，可以改变元素的行为、样式和内容。以下是一些常用的方法：
<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>
实验一: 查看属性和修改属性
1.根据id获取节点
利用getElementsById在document范围通过id名查找一个叫p3的元素
语法：查找范围.getElementsById("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);
实验二: classList对象的操作
classList 用于操作元素的类名。它提供了一组方法，可以方便地添加、删除、切换和检查类名。
1.根据id获取节点
利用getElementsById在document范围通过id名查找一个叫p4的元素
const p4 = document.getElementById("p4");
console.log(p4.classList);
console.log(p4.classList[0]);2.为classList添加一个新的class名
add(className)：可以传入一个或多个类名。
p4.classList.add("zz");
console.log(p4.classList);3.为classList移除一个class名
remove(className)：可以传入一个或多个类名。
p4.classList.remove("xx");
console.log(p4.classList);4.检查classList中是否存在某个class名，返回布尔值。
contains(className)：返回一个布尔值，表示元素是否包含指定的类名。
console.log(p4.classList.contains("jj"));
console.log(p4.classList.contains("zz"));运行效果：
实验三.: 其他属性的查看与修改（以<img>标签为例）
写一个img标签
<img src="./img_src/top.jpg" alt="图片加载失败" id="img1">直接通过属性名来获取属性的值，再通过属性名来修改属性的值
const i = document.getElementById("img1");
i.src = "./img_src/tu.jpg"; // 修改src属性
Tips:修改节点属性时要确保节点已经存在，否则会报错。
四、节点创建与插入
<p class="pp">
我是段落2
</p>
<p class="pp" id="p3">我是段落3</p>
<p class="pp jj yy xx" id="p4">我是段落4</p>1.创建节点
- 使用
document.createElement方法创建一个新的元素节点。
1.1创建元素节点（Element Node）:
document.createElement(tagName)：创建一个新的元素节点。
var p4 = document.createElement("p");1.2 创建一个文本节点
document.createTextNode(text)：创建一个新的文本节点
var t4 = document.createTextNode("我是段落5");
console.log(t4);1.3 创建一个属性节点并为其赋值
var a4 = document.createAttribute("class"); // 创建属性节点
a4.value = "fruit"; // 为属性节点赋值
console.log(a4);2.插入节点
2.1 appendChild(node)：将节点作为指定父节点的最后一个子节点插入，
将文本节点作为子节点，加入新建的<p>标签节点下面
p4.appendChild(t4); 2.2setAttributeNode(node)：将一个属性节点添加到元素节点中。
将属性节点插入新建的<p>标签节点
p4.setAttributeNode(a4);2.3 将已经配置号的<p>标签节点，作为子节点，插入body节点中
const body_node = document.getElementsByTagName("body")[0];
body_node.appendChild(p4);除了appendChild()方法，还有一些其他的插入节点的方法，例如insertBefore()、insertAdjacentHTML()等，根据具体的需求选择合适的方法来插入节点
五、CSS样式的修改
在 JavaScript 中，修改元素的 CSS 样式是非常常见的操作。你可以通过多种方式来修改元素的样式。
<style>
.box{
width: 50%;
height: 200px;
color:blue;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="box" id="div1">利用js修改CSS样式</div>
</body>1. 直接修改style 属性
在<script>标签里利用getElementsById在document范围通过id名查找一个叫div1的元素，通过元素的style属性来修改元素的样式。这个属性是一个对象，包含了元素的所有CSS属性和对应的值。
var e = document.getElementById("div1");
e.style.backgroundColor = "red";
e.style.color = "white";
e.style.fontSize = "30px";运行效果：
2.直接修改该节点的CSS代码
利用反引号来解决过长字符串的换行问题，以提高阅读性
e.style.cssText =
`
background-color: gray;
color:green;
font-size: 50px;
`;运行效果：
Tips:如何在键盘中输入反引号：英文输入法下，按左上角那个键