一、DOM 核心逻辑
（1）DOM（文档对象模型）会将 HTML 文档解析为树形对象结构，页面中所有的标签、文字、属性都是独立的节点。我们的 JS 代码，本质就是对这些节点进行查询、修改、新增、删除操作，实现页面无刷新动态变化。
（2）DOM 最常用的三类节点：元素节点（HTML标签）、文本节点（标签内容）、属性节点（标签属性）
二、DOM 节点获取（所有取值方式全覆盖）
（1）实操代码
DOM 操作的第一步永远是获取节点。如果无法精准拿到页面元素，所有修改、新增操作都无从谈起。这里汇总前端 5 种主流节点获取方式，搭配实测代码
<!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>实现图
（2）核心区别
1.getElementById：根据唯一ID获取，速度最快，直接返回单个元素，无需遍历
2.getElementsByTagName / getElementsByClassName：批量获取，返回动态HTMLCollection，页面元素变化时集合会自动更新
3.querySelector / querySelectorAll：支持所有CSS选择器（类、id、后代、属性选择器等），返回静态NodeList，语法统一、稳定性高
三、DOM 节点属性修改（class、id、src 精细化操作）
获取节点后，最常用的操作就是修改节点属性。包括基础的 id、类名修改，精细化的 class 类名增删切换，以及图片、链接等资源属性修改，是页面样式、内容动态更新的核心
（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 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>（2）核心知识
1.className：全覆盖修改类名，会直接覆盖原有所有 class，适合一次性重置样式
2.classList：精细化操作，支持add新增、remove删除、contains判断、toggle切换，不覆盖原有样式
3.原生资源属性（src、href、alt）可直接赋值修改，浏览器会实时生效，实现图片、链接动态切换
四、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> <!-- 下面是随便写的一堆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>（2）核心流程
1.创建节点：分别创建元素、文本、属性节点，分离结构、内容、属性
2.组装节点：通过appendChild、setAttributeNode将子节点挂载到父元素
3.渲染页面：将组装完成的完整元素插入页面根节点（body），页面实时更新
4.删除节点：通过父元素removeChild删除指定子节点
五、实例代码
<!DOCTYPE html> <html lang="N"> <head> <meta charset="UTF-8"> <title>课堂练习：节点的相关操作</title> </head> <body> <!-- 原始两条hr --> <hr id="hr1"> <hr id="hr2"> <script> // 1. 将id=hr1的第一条横线改为黑色 const hr1 = document.getElementById('hr1'); hr1.color = "black"; // 2. 删除id=hr2的第二条绿色横线 const hr2 = document.getElementById('hr2'); hr2.remove(); // 3. 创建蓝色、宽度250、id=hr3的hr并添加到页面 const hr3 = document.createElement("hr"); hr3.id = "hr3"; hr3.color = "blue"; hr3.width = "250"; document.body.appendChild(hr3); </script> </body> </html>
