一、DOM基础概念与DOM树
浏览器解析HTML文档，会把整个页面转化为一棵DOM树。页面中标签、文本、注释全部转换为树上的节点对象，JS通过API访问、修改这些节点。
-
document：文档根节点，DOM的入口对象
-
元素节点：html、body、div、p、span等标签
-
文本节点：标签内部的文字内容
-
属性节点：标签上的id、class、src、data‑*等属性
⚠️ JS代码执行时机：HTML还没解析完成就获取元素，会得到 null。
二、获取DOM元素
操作页面第一步：选中页面目标元素，常用几套API。
// 根据id获取，返回单个元素对象 let box = document.getElementById("box"); // CSS选择器获取匹配第一个元素，开发最常用 let item = document.querySelector(".list-item"); // CSS选择器获取全部匹配元素，返回NodeList集合 let listArr = document.querySelectorAll(".list-item"); // 根据类名获取，返回HTMLCollection集合 let clsBox = document.getElementsByClassName("box");
注意：querySelectorAll 返回节点集合，不能直接调用元素方法，必须循环遍历取出每一项。
三、读取修改元素内容
let box = document.querySelector(".box"); // innerText：读写纯文本，不会解析HTML标签 box.innerText = "普通文本内容"; // innerHTML：读写内容，可以解析HTML标签 box.innerHTML = "<span style='color:red'>红色文字</span>";
-
innerText：只处理文本，自动忽略标签，安全性高
-
innerHTML：支持渲染标签，存在XSS注入风险，用户输入内容禁止直接赋值
四、元素属性操作
原生标签属性
let img = document.querySelector("img"); // 读取属性 console.log(img.src); // 修改属性 img.src = "demo.png"; img.alt = "示例图片";
data‑* 自定义属性（存储业务数据）
<div data‑id="1001" data‑title="测试标题"></div>
let div = document.querySelector("div"); console.log(div.dataset.id); console.log(div.dataset.title);
五、样式与类名操作
方式一：直接操作行内style，CSS属性转为驼峰命名
let box = document.querySelector(".box"); box.style.width = "200px"; box.style.backgroundColor = "#409eff";
方式二：classList 操作类名（工程开发首选）
let box = document.querySelector(".box"); box.classList.add("active"); // 添加类 box.classList.remove("active"); // 删除类 box.classList.toggle("active"); // 切换类，有则删、无则加 box.classList.contains("active"); // 判断是否拥有该类，返回布尔值
六、节点创建、追加、删除
// 创建新元素节点 let newDiv = document.createElement("div"); newDiv.innerText = "动态创建的元素"; // 获取父容器 let wrap = document.querySelector(".wrap"); // 末尾追加子节点 wrap.appendChild(newDiv); // 删除子节点（父调用） wrap.removeChild(newDiv); // 元素自身删除 newDiv.remove();
七、DOM事件基础
事件：监听用户行为（点击、移入、输入、滚动等），行为触发执行JS逻辑。addEventListener标准绑定方式。
let btn = document.querySelector("button"); btn.addEventListener("click", function (e) { console.log("按钮被点击"); // e 事件对象，保存本次事件全部信息 });
高频常用事件：
-
click：鼠标单击
-
mouseenter / mouseleave：鼠标移入移出
-
input：表单输入实时触发
-
scroll：页面滚动事件
事件对象与事件冒泡
事件会从触发的子节点向上传递到父节点、祖先节点，称为事件冒泡。可以调用方法阻止冒泡传递。
btn.addEventListener("click", function (e) { e.stopPropagation(); // 阻止事件冒泡 });
八、DOM开发注意要点
- JS写在HTML前面时，使用DOMContentLoaded等待页面解析完成
document.addEventListener("DOMContentLoaded", function () { // 此处执行获取元素DOM操作 });
-
DOM操作性能开销大于普通JS逻辑，减少频繁循环DOM修改
-
优先classList切换类，少大量直接操作style行内样式
-
innerHTML谨慎使用，防止XSS脚本注入安全问题