DOM是浏览器提供的网页“JS可读版本”，将HTML解析为元素、文本、属性节点构成的树状结构，使JavaScript能查找、修改、增删页面元素，并与页面实时同步。
JavaScript 操作 HTML 的核心方式，就是通过 DOM（Document Object Model，文档对象模型）。DOM 不是 JavaScript 本身的一部分，而是浏览器提供的一套接口，它把网页解析成一棵结构化的“节点树”，让 JS 能像操作对象一样查找、读取、修改甚至删除页面上的元素。
DOM 是什么：网页的“JS 可读版本”
当你写好一个 HTML 页面，浏览器加载后并不会只把它当成纯文本显示出来——它会自动将 HTML 解析成一个由 元素节点（如 <div>、<p>）、文本节点（标签里的文字）、属性节点（如 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 = "<strong>加粗</strong>"（注意 XSS 风险）。 -
修改样式或属性：设样式用
element.style.color = "red"；设属性用element.setAttribute("disabled", "")或直接element.id = "newId"。 -
添加或删除节点：创建新元素用
document.createElement("li")，再用parent.appendChild(newLi)插入；删除用element.remove()或parent.removeChild(child)。
操作前要等页面加载完
JS 代码如果写在 <head> 里，执行时 HTML 还没解析，document.getElementById 会返回 null。常见解决方式：
立即学习“Java免费学习笔记（深入）”；
- 把 <script> 放在 </body> 前面；
- 用
document.addEventListener("DOMContentLoaded", () => { /* 操作代码 */ })； - 现代写法也可用
async或defer属性控制脚本加载时机。
DOM 是活的，不是快照
DOM 节点和页面实时同步。比如你用 JS 修改了某个 <input> 的 value 属性，页面输入框内容立刻变化；反过来，用户手动输入也会实时更新 DOM 中的 value。但要注意：innerHTML 读取的是当前渲染后的 HTML 字符串（含 JS 动态插入的内容），而 outerHTML 还包括元素自身标签。
