好久不见！今天让我们一起来学习document object model（文档对象模型）。简称DOM，它是一种允许程序动态地访问或更新HTML文档的内容、结构和样式，且提供一系列函数和对象来实现增删改查操作。
一：获取DOM节点
我们要对页面元素进行修改或增加，第一步必须获取对应DOM节点。其核心原理有两点：①浏览器的渲染机制决定必须通过DOM操作；②DOM节点是内存中对象引用。获取DOM节点有四种方法：
1：通过ID名去获取（getElementById）
作用：通过唯一ID精准获取元素（性能最高）。
const p3 = document.getElementById("p1"); console.log(p1);2.通过标签名去获取（getElementsByTagName）
作用：根据指定的 HTML 标签名，获取当前文档或指定父元素下所有匹配的元素。
<body> <p class="pp">我是段落1</p> <p class="pp">我是段落2</p> <p class="pp" id="p1">我是段落1</p> </body>3.通过class名去获取（getElementsByClassName）
作用：根据指定的 CSS 类名，获取当前文档或指定父元素下所有匹配的元素
const p2 = document.getElementsByClassName("pp"); console.log(p3); console.log(p2[1]); console.log(p2[2]); console.log(p2[3]);4.通过CSS选择器获取
方法①：querySelector(获取单个节点)，返回值为：匹配到的第一个元素对象；如果找不到，返回null；
const p1 = document.querySelector(".pp");方法②：querySelector(获取多个节点)，返回值为：一个包含所有匹配元素的 静态 NodeList 集合。如果没有匹配项，返回一个空的 NodeList（而不是null）。
const p2 = document.querySelectorAll(".pp"); console.log(p2); console.log(p2[0]); console.log(p2[1]); console.log(p2[2]);二：DOM节点的属性修改
作用：在不刷新页面的情况下，动态改变元素的特征、状态、样式或内容，从而实现丰富的用户交互和动态数据展示。
①：查看元素节点的属性并修改属性
const p3 = document.getElementById("p3"); console.log("旧属性值:", p3.className); console.log("旧属性值:", p3.id); p3.className = "pp jj yy xx"; p3.id = "_p_3"; console.log("新属性值:", p3.className); console.log("新属性值:", p3.id);②：classList对象的操作
const p4 = document.getElementById("p4"); p4.classList.add("zz"); console.log(p4.classList); 4.classList.remove("xx"); console.log(p4.classList); console.log(p4.classList.contains("jj")); console.log(p4.classList.contains("zz")); p4.classList.toggle("dark-mode");③：其他属性的查看与修改
const img = document.getElementById("img1"); console.log("修改前:", img.src); img.src = "./img_src/logo1.png"; console.log("修改后:", img.src);三：节点的创建、插入与删除
1.创建节点
<script> var ele = document.createElement("p"); var txt = document.createTextNode("我是用Javascript创建的新节点"); console.log(txt); var attr = document.createAttribute("class"); attr.value = "hello world"; console.log(attr); </script>2.插入节点
<script> ele.appendChild(txt); ele.setAttributeNode(attr); const body_node = document.getElementsByTagName("body")[0]; body_node.appendChild(ele); </script>3.删除节点
<script> const p3 = document.getElementById("p1"); body_node.removeChild(p1); </script>四：小结
DOM是连接JS与网页的桥梁。本章博客讲解了DOM核心操作：通过ID、标签、类名及CSS选择器精准获取节点；利用属性赋值与classList动态修改元素状态与样式；掌握节点的创建、插入与删除方法。
