DOM是浏览器提供的网页“JS可读版本”，将HTML解析为元素、文本、属性节点构成的树状结构，使JavaScript能查找、修改、增删页面元素，并与页面实时同步。

JavaScript 操作 HTML 的核心方式，就是通过 DOM（Document Object Model，文档对象模型）。DOM 不是 JavaScript 本身的一部分，而是浏览器提供的一套接口，它把网页解析成一棵结构化的“节点树”，让 JS 能像操作对象一样查找、读取、修改甚至删除页面上的元素。

DOM 是什么：网页的“JS 可读版本”

当你写好一个 HTML 页面，浏览器加载后并不会只把它当成纯文本显示出来——它会自动将 HTML 解析成一个由 元素节点（如

）、文本节点（标签里的文字）、属性节点（如 id="box"、class="btn"）组成的树状结构。这棵树就是 DOM 树。每个节点都是一个对象，有属性（比如 node.tagName）、方法（比如 node.appendChild()），JS 就靠这些和页面互动。

常用 DOM 操作：查、改、增、删

实际开发中，最常做的四类操作：

• 查找元素：用 document.getElementById("id")、document.querySelector(".class") 或 document.querySelectorAll("p") 获取目标元素对象。
• 修改内容：改文本用 element.textContent = "新文字"；改 HTML 用 element.innerHTML = "加粗"（注意 XSS 风险）。
• 修改样式或属性：设样式用 element.style.color = "red"；设属性用 element.setAttribute("disabled", "") 或直接 element.id = "newId"。
• 添加或删除节点：创建新元素用 document.createElement("li")，再用 parent.appendChild(newLi) 插入；删除用 element.remove() 或 parent.removeChild(child)。

操作前要等页面加载完

JS 代码如果写在

• 把
• 用 document.addEventListener("DOMContentLoaded", () => { /* 操作代码 */ })；
• 现代写法也可用 async 或 defer 属性控制脚本加载时机。

DOM 是活的，不是快照

DOM 节点和页面实时同步。比如你用 JS 修改了某个 的 value 属性，页面输入框内容立刻变化；反过来，用户手动输入也会实时更新 DOM 中的 value。但要注意：innerHTML 读取的是当前渲染后的 HTML 字符串（含 JS 动态插入的内容），而 outerHTML 还包括元素自身标签。