DOM
一句话解释
DOM 是浏览器把 HTML 解析后生成的树状对象结构，JavaScript 通过它来读取和修改网页内容。
用大白话说
DOM 是“文档对象模型”（Document Object Model）的缩写。浏览器加载 HTML 后，会把那些标签解析成一棵“节点树”，每个标签变成树上的一个对象节点——这就是 DOM。
比如 <html> 是根节点，它下面有 <head> 和 <body>，<body> 下又有 <h1>、<p> 等子节点。JavaScript 通过 DOM API 就能找到这些节点、修改它们的内容、改变样式、响应事件。
document.getElementById("title") 拿到那个元素节点，element.textContent = "新标题" 就能改它的文字。所谓“动态网页”，本质就是用 JS 操作 DOM——增删改节点、切换样式、监听点击。理解 DOM 是前端开发的核心。
示例
javascript
// HTML 里有个 <h1 id="title">旧标题</h1>
const el = document.getElementById("title");
el.textContent = "新标题";
el.style.color = "blue";document.getElementById 通过 id 找到 DOM 节点，然后修改它的文字内容和样式。这就是 JS 操作网页的方式。
工作原理
- 浏览器加载 HTML，把每个标签解析成节点对象
- 节点按嵌套关系组成一棵树（DOM 树）
- JS 用
document对象查找、读取、修改节点 - 修改后浏览器自动重新渲染对应部分
常见混淆
容易混淆的对象: HTML
关键区别: HTML 是你写的源代码（文本），DOM 是浏览器把 HTML 解析后生成的内存对象树。改 HTML 要刷新页面，改 DOM 是即时的。
相关术语
相关资源
相关课程
- DOM 课程
学习用 JS 操作 DOM
学习基础知识
通过结构化课程深入理解这个主题。
解读错误信息
用大白话解释常见错误——什么意思、为什么发生、如何修复。