DOM是浏览器将HTML/XML解析成的树状结构，使JavaScript能访问和修改网页内容、结构与样式；根节点为document，包含元素、文本和属性节点，支持查找、修改、增删等操作。
DOM（Document Object Model，文档对象模型）是浏览器把 HTML 或 XML 文档解析成的一棵树状结构，它让 JavaScript 能够以编程方式访问、修改网页的内容、结构和样式。简单说，DOM 就是网页在 JS 眼里的“地图”——每个标签、文本、属性都变成一个可操作的对象。
HTML 页面加载后，浏览器会生成一个由 元素节点（如
、）、文本节点（标签内的文字）和 属性节点
（如 id="box"）组成的树。根节点是 document，所有操作都从它开始。
比如这段 HTML：
Hello
对应 DOM 中：document → div#container → p → 文本节点 "Hello"
要操作元素，先得找到它。JS 提供了多个定位方式：
document.getElementById("id")：通过唯一 id 获取单个元素（最快最常用）document.querySelector("css选择器")：支持类名、标签、属性等，返回第一个匹配项（如 querySelector(".btn")）document.querySelectorAll("css选择器")：返回所有匹配的元素集合（NodeList，可遍历）element.children 或 element.childNodes：获取子元素或全部子节点（含空白文本）找到元素后，就能动态改变它：
element.textContent = "新文字"：安全替换文本（不解析 HTML）element.innerHTML = "加粗"：直接写 HTML（注意 XSS 风险）element.setAttribute("class", "active") 或 element.className = "active"
element.style.color = "red"：改内联样式（注意驼峰命名，如 backgroundColor）DOM 支持动态增删结构：
parent.appendChild(newElement)：在末尾添加子元素parent.insertBefore(newElement, referenceElement)：插到某个元素前element.remove()：直接删掉自己（现代写法，兼容性好）parent.replaceChild(newElement, oldElement)：用新元素替换旧的基本上就这些。DOM 操作不复杂但容易忽略细节，比如获取元素时确保 DOM 已加载（常用 DOMContentLoaded 事件），或者修改样式优先用 class 而非 style，更利于维护。