DOM是浏览器提供的将HTML转换为JS可操作对象树的接口，通过节点关系组织元素，支持查找、修改、增删等操作，核心流程为“先找、再改、后更新”。
JavaScript DOM（文档对象模型）是浏览器提供的一套接口，用来把网页的 HTML 结构转换成 JavaScript 可识别、可操作的对象树。简单说，它让 JS 能“看懂”页面里有哪些元素，并能读取、修改、添加或删除它们。
DOM 是什么：网页的“JS 版地图”
当你打开一个网页，浏览器会把 HTML 代码解析成一棵树状结构，每个标签（比如 <div>、<p>、<button>）都变成一个“节点”，这些节点按父子、兄弟关系组织起来——这就是 DOM 树。JS 不直接操作 HTML 文本，而是通过 DOM 接口操作这棵树。
例如：<body><h1 id="title">Hello</h1></body> 在 DOM 中就表现为一个 body 节点 包含一个 h1 节点，而这个 h1 节点有个 id 属性值为 "title"。
怎么找到网页里的元素
常用方法有这几个，选对了才能后续操作：
立即学习“Java免费学习笔记（深入）”；
- document.getElementById("xxx") —— 通过 id 找唯一元素，最常用也最快
- document.querySelector("css选择器") —— 支持类名（.btn）、标签（p）、属性（[data-id]）等，只返回第一个匹配项
- document.querySelectorAll("css选择器") —— 返回所有匹配的元素，结果是 NodeList（类似数组）
- document.getElementsByClassName("xxx") 或 document.getElementsByTagName("div") —— 按类名或标签名找，返回 HTMLCollection
小提示：用 querySelector 前确保 DOM 已加载完成，否则可能找不到元素。可以放在 DOMContentLoaded 事件里，或者把 script 标签放页面底部。
怎么修改元素的内容和样式
找到元素后，就能读写它的各种属性：
- element.textContent = "新文字" —— 改纯文本内容（安全，防 XSS）
- element.innerHTML = "<em>加粗又斜体</em>" —— 改带 HTML 的内容（注意安全风险）
- element.style.color = "red" —— 直接改行内样式（驼峰写法，如 backgroundColor）
- element.className = "active" 或 element.classList.add("hidden") —— 控制 class，推荐用 classList 更灵活
- element.setAttribute("data-status", "done") —— 添加或修改自定义属性
怎么添加、删除或替换元素
动态更新页面离不开这些操作：
- document.createElement("div") —— 创建新元素
- parent.appendChild(newEl) —— 把新元素加到父容器末尾
- parent.insertBefore(newEl, refEl) —— 插到某个参考元素前面
- element.remove() —— 删除自身（现代写法，兼容性好）
- parent.replaceChild(newEl, oldEl) —— 替换子元素
例子：点击按钮，往列表里加一项：
const btn = document.querySelector("#addBtn");
const list = document.querySelector("#itemList");
btn.addEventListener("click", () => {
const newItem = document.createElement("li");
newItem.textContent = "新任务";
list.appendChild(newItem);
});
DOM 操作的核心就是“先找、再改、后更新”。理解节点关系、熟悉常用 API、注意执行时机，就能稳稳控制页面行为。不复杂但容易忽略细节，多练几次就顺手了。
