17370845950

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，更利于维护。