DOM是浏览器将HTML/XML解析成的树状结构，使JavaScript能访问和修改网页内容、结构与样式；根节点为document，包含元素、文本和属性节点，支持查找、修改、增删等操作。
DOM（Document Object Model，文档对象模型）是浏览器把 HTML 或 XML 文档解析成的一棵树状结构，它让 JavaScript 能够以编程方式访问、修改网页的内容、结构和样式。简单说，DOM 就是网页在 JS 眼里的“地图”——每个标签、文本、属性都变成一个可操作的对象。
DOM 是一棵节点树
HTML 页面加载后，浏览器会生成一个由 元素节点（如
、）、文本节点（标签内的文字）和 属性节点
（如 id="box"）组成的树。根节点是 document，所有操作都从它开始。
比如这段 HTML：
Hello
对应 DOM 中：document → div#container → p → 文本节点 "Hello"
常用 DOM 查找方法
要操作元素，先得找到它。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，更利于维护。
