什么是 DOM？从文档树到页面交互，一次讲清 Document Object Model

很多人刚学前端时都会听到一句话：

JavaScript 通过 DOM 操作页面。

但继续问下去：

DOM 到底是什么？
DOM 是 HTML 吗？
DOM 是浏览器自动生成的一棵树吗？
document.querySelector() 为什么能选到元素？
为什么有人说“频繁操作 DOM 很慢”？

这篇文章的目标，就是把这些问题一次讲清。

1）先说结论：DOM 不是 HTML，本质上是“对象化后的文档模型”

DOM（Document Object Model，文档对象模型），可以理解为：

浏览器把一份文档解析后，在内存里构造成一棵可被程序读取和修改的对象树。

这棵树里的每一个点，都是一个 node（节点）。页面里的标签、文本、注释，都会以节点的形式存在。

例如这段 HTML：

html

<!doctype html>
<html>
  <body>
    <h1>Hello</h1>
    <p>DOM is a tree.</p>
  </body>
</html>

浏览器不会直接“拿字符串 HTML 去交互”，而是会把它解析成近似下面这样的结构：

text

Document
└── html
    └── body
        ├── h1
        │   └── "Hello"
        └── p
            └── "DOM is a tree."

这就是常说的 DOM tree（DOM 树）。

所以要抓住第一个关键点：

HTML 是文本源码
DOM 是浏览器解析后得到的对象结构

HTML 更像“设计图纸”，DOM 更像“运行中的对象模型”。JavaScript 能改页面，是因为它改的不是原始 HTML 字符串，而是这棵 DOM 树。

2）为什么浏览器需要 DOM

如果浏览器只是把 HTML 当普通文本展示，那页面就无法进行程序化交互。

例如：

点击按钮后修改标题
输入表单后校验内容
动态插入列表项
给元素绑定事件
根据用户状态切换样式和内容

这些都要求页面结构必须能被程序访问、查询、修改。

DOM 解决的就是这个问题：它把“文档”变成了“对象”。

这样 JavaScript 就可以用统一的 API 去操作页面，例如：

const title = document.querySelector('h1')
title.textContent = 'Hello DOM'

这里发生的事情并不是“替换 HTML 文件里的字符串”，而是：

通过 document 拿到当前文档对象
在 DOM 树里找到第一个 h1 节点
修改这个节点的文本内容
浏览器把变更反映到屏幕上

这也是为什么 DOM 是前端交互的基础层。你在 React、Vue、Svelte 里写的组件，最终也要落回到浏览器 DOM 才能显示给用户。

3）DOM 里最重要的几个概念

3.1 `document`

document 表示当前页面对应的 DOM 文档对象。

它通常是你接触 DOM 的入口：

console.log(document)
console.log(document.title)
console.log(document.body)

可以把它理解成“整棵 DOM 树的根入口”。

3.2 `Node`

Node 是 DOM 中最基础的节点接口。任何 DOM 树里的成员，本质上都可以看作节点。

常见节点包括：

文档节点（Document）
元素节点（Element）
文本节点（Text）
注释节点（Comment）

所以 Node 是更底层、更泛化的概念。

3.3 `Element`

Element 指元素节点，也就是像 <div>、<p>、<button> 这样的标签对象。

比如：

const button = document.querySelector('button')
console.log(button)

这里拿到的通常就是一个 Element（更具体地说，在 HTML 里常是 HTMLElement）。

3.4 文本节点

很多初学者会忽略这一点：

html

<p>Hello DOM</p>

这个 p 元素内部的 Hello DOM 不是元素，而是一个 文本节点。

也就是说，DOM 不是“只有标签的一棵树”，而是“标签、文本、注释等混合组成的一棵树”。

4）DOM 树到底长什么样

理解 DOM，最重要的是建立“树”的思维。

例如：

html

<ul id="todo-list">
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>

对应的 DOM 可以粗略理解为：

text

ul#todo-list
├── li
│   └── "Learn HTML"
├── li
│   └── "Learn CSS"
└── li
    └── "Learn JavaScript"

于是很多 DOM API 就很好理解了：

parentNode / parentElement：父节点
childNodes：所有子节点
children：所有子元素
firstChild / lastChild
nextSibling / previousSibling

例如：

const list = document.querySelector('#todo-list')
console.log(list.children.length) // 3
console.log(list.firstElementChild.textContent) // Learn HTML

当你把页面当树来理解，DOM API 本质上就是“树的查询与修改工具”。

5）最常用的 DOM 操作：选中、读取、修改

5.1 选中元素

现代前端里最常用的是 querySelector 和 querySelectorAll：

const title = document.querySelector('h1')
const items = document.querySelectorAll('li')

它们的优势是：可以直接使用 CSS 选择器语法。

比如：

document.querySelector('#app')
document.querySelector('.card.active')
document.querySelector('input[type="email"]')

这也是为什么 querySelector 成为最推荐的现代写法——它直观、统一，而且与 CSS 选择器共享一套思维模型。

5.2 读取文本和属性

const link = document.querySelector('a')
console.log(link.textContent)
console.log(link.href)

5.3 修改内容

const title = document.querySelector('h1')
title.textContent = 'DOM 学习中'

5.4 修改结构

const ul = document.querySelector('ul')
const li = document.createElement('li')
li.textContent = 'Learn DOM'
ul.appendChild(li)

这段代码的意思是：

创建一个新的 li 元素节点
给它设置文本内容
把它追加到 ul 的子节点末尾

这就是典型的 DOM 树修改。

6）事件也是 DOM 世界的一部分

很多人把 DOM 理解成“查元素 + 改内容”，但其实事件系统也是 DOM API 的核心组成部分。

例如：

const button = document.querySelector('button')
 
button.addEventListener('click', () => {
  alert('你点击了按钮')
})

这里你不仅拿到了 DOM 元素，还给它绑定了交互行为。

所以从工程视角看，DOM 至少包含三层能力：

表示页面结构：树状节点模型
提供查询与修改 API：选中、创建、删除、替换
承载事件交互：点击、输入、提交、键盘、滚动等

这也是为什么说 DOM 不是“一个对象”那么简单，而是一整套浏览器文档交互模型。

7）`innerHTML`、`innerText`、`textContent` 到底有什么区别

这是 DOM 初学阶段最容易混淆的一组概念。

`textContent`

表示节点及其后代节点的纯文本内容。

const p = document.querySelector('p')
p.textContent = '<strong>Hello</strong>'

页面上会看到的是：

text

<strong>Hello</strong>

也就是说，它把内容当普通文本处理，不解析为 HTML。

`innerHTML`

表示元素内部的 HTML 结构。

p.innerHTML = '<strong>Hello</strong>'

这时页面上会真正渲染出加粗的 Hello。

怎么选

如果你只是想安全地设置文本内容，优先使用：

textContent

如果你确实要插入一段 HTML 结构，才考虑：

innerHTML

因为 innerHTML 不只是“更方便”，它还意味着：

浏览器需要重新解析字符串
可能带来更多渲染和结构更新成本
如果拼接了不可信输入，可能引入 XSS 风险

所以一个非常实用的原则是：

能用 textContent，就不要先用 innerHTML。

8）DOM 常见误区

误区 1：DOM 就是 HTML

不对。

HTML 是文档源码，DOM 是浏览器解析后在内存里的对象模型。两者有关联，但不是一回事。

误区 2：DOM 里只有元素节点

不对。

文本、注释、文档本身也都是节点。DOM 树不是“标签树”，而是“节点树”。

误区 3：JavaScript 直接修改了 HTML 文件

不对。

JavaScript 修改的是当前页面运行时的 DOM 状态，不是你磁盘里的 .html 文件。

误区 4：用了框架就不用懂 DOM 了

也不对。

框架确实帮你减少了手写 DOM 操作，但事件、表单、焦点、滚动、选择器、挂载节点、浏览器 API 这些问题，最终还是落回 DOM。

不会 DOM，很多前端问题你只能“背框架 API”，但看不清底层发生了什么。

误区 5：DOM 慢，所以不要碰 DOM

这也是过度简化。

真正的问题通常不是“碰了 DOM 就慢”，而是：

一次做了太多无意义更新
频繁读写布局信息，触发反复计算
DOM 树过大，导致布局和渲染成本上升

所以更准确的说法应该是：

不合理的 DOM 操作会影响性能，而不是 DOM 本身天然不能碰。

9）为什么“频繁操作 DOM 很慢”

这句话有一半对，一半不对。

对的部分在于：DOM 变更往往会影响浏览器后续工作，比如样式计算、布局（layout）、绘制（paint）。

尤其当页面节点很多时，浏览器处理这些步骤的成本会上升。

例如你反复执行这种逻辑：

for (let i = 0; i < 1000; i++) {
  element.style.width = `${i}px`
  console.log(element.offsetWidth)
}

这里的问题不是“用了 DOM API”，而是你在写布局属性后又立刻读取布局结果，容易导致浏览器反复进行布局计算。这类模式常被称为 layout thrashing。

更合理的思路通常是：

批量更新，减少零碎修改
尽量把“读”和“写”分开
不要在高频循环里反复触发布局相关读取
避免让 DOM 树复杂到失控

对于初学者来说，只要先记住一句话：

DOM 操作不是不能做，而是要避免无意义、高频、打断浏览器优化节奏的操作。

10）从工程角度看，学 DOM 到什么程度算够用

如果你是前端初学者到中级开发者，至少要掌握这些：

必会概念

DOM 是浏览器中的文档对象模型
DOM 是树结构，不是扁平列表
Document、Node、Element 的层级关系
元素节点与文本节点的区别

必会 API

querySelector / querySelectorAll
textContent / innerHTML
createElement
appendChild / removeChild
classList
setAttribute / 直接属性读写
addEventListener

必会意识

DOM 改动会影响浏览器渲染流程
innerHTML 要谨慎，尤其面对用户输入
框架不是替代 DOM，而是更高层的抽象

如果这些概念你已经顺了，后面学 React、Vue、事件冒泡、表单、Shadow DOM、渲染优化时，就会轻松很多。

11）一句话总结

如果只用一句话概括 DOM，那就是：

DOM 是浏览器把文档表示为对象树的一种模型，让 JavaScript 能以编程方式读取、修改和监听页面。

你可以把它理解成“页面在浏览器里的可编程形态”。

前端开发里，HTML 负责描述内容，CSS 负责描述样式，而 DOM 则是让页面“可被程序操作”的那一层桥梁。

理解了 DOM，你才真正开始理解浏览器中的页面到底是什么。

参考资料

MDN Web Docs: DOM（Glossary）
MDN Web Docs: HTML DOM API / Node / DOM scripting
web.dev: Avoid large, complex layouts and layout thrashing

什么是 DOM？从文档树到页面交互，一次讲清 Document Object Model

很多人刚学前端时都会听到一句话：

JavaScript 通过 DOM 操作页面。

但继续问下去：

DOM 到底是什么？
DOM 是 HTML 吗？
DOM 是浏览器自动生成的一棵树吗？
document.querySelector() 为什么能选到元素？
为什么有人说“频繁操作 DOM 很慢”？

这篇文章的目标，就是把这些问题一次讲清。

1）先说结论：DOM 不是 HTML，本质上是“对象化后的文档模型”

DOM（Document Object Model，文档对象模型），可以理解为：

浏览器把一份文档解析后，在内存里构造成一棵可被程序读取和修改的对象树。

这棵树里的每一个点，都是一个 node（节点）。页面里的标签、文本、注释，都会以节点的形式存在。

例如这段 HTML：

html

<!doctype html>
<html>
  <body>
    <h1>Hello</h1>
    <p>DOM is a tree.</p>
  </body>
</html>

浏览器不会直接“拿字符串 HTML 去交互”，而是会把它解析成近似下面这样的结构：

text

Document
└── html
    └── body
        ├── h1
        │   └── "Hello"
        └── p
            └── "DOM is a tree."

这就是常说的 DOM tree（DOM 树）。

所以要抓住第一个关键点：

HTML 是文本源码
DOM 是浏览器解析后得到的对象结构

HTML 更像“设计图纸”，DOM 更像“运行中的对象模型”。JavaScript 能改页面，是因为它改的不是原始 HTML 字符串，而是这棵 DOM 树。

2）为什么浏览器需要 DOM

如果浏览器只是把 HTML 当普通文本展示，那页面就无法进行程序化交互。

例如：

点击按钮后修改标题
输入表单后校验内容
动态插入列表项
给元素绑定事件
根据用户状态切换样式和内容

这些都要求页面结构必须能被程序访问、查询、修改。

DOM 解决的就是这个问题：它把“文档”变成了“对象”。

这样 JavaScript 就可以用统一的 API 去操作页面，例如：

const title = document.querySelector('h1')
title.textContent = 'Hello DOM'

这里发生的事情并不是“替换 HTML 文件里的字符串”，而是：

通过 document 拿到当前文档对象
在 DOM 树里找到第一个 h1 节点
修改这个节点的文本内容
浏览器把变更反映到屏幕上

这也是为什么 DOM 是前端交互的基础层。你在 React、Vue、Svelte 里写的组件，最终也要落回到浏览器 DOM 才能显示给用户。

3）DOM 里最重要的几个概念

3.1 `document`

document 表示当前页面对应的 DOM 文档对象。

它通常是你接触 DOM 的入口：

console.log(document)
console.log(document.title)
console.log(document.body)

可以把它理解成“整棵 DOM 树的根入口”。

3.2 `Node`

Node 是 DOM 中最基础的节点接口。任何 DOM 树里的成员，本质上都可以看作节点。

常见节点包括：

文档节点（Document）
元素节点（Element）
文本节点（Text）
注释节点（Comment）

所以 Node 是更底层、更泛化的概念。

3.3 `Element`

Element 指元素节点，也就是像 <div>、<p>、<button> 这样的标签对象。

比如：

const button = document.querySelector('button')
console.log(button)

这里拿到的通常就是一个 Element（更具体地说，在 HTML 里常是 HTMLElement）。

3.4 文本节点

很多初学者会忽略这一点：

html

<p>Hello DOM</p>

这个 p 元素内部的 Hello DOM 不是元素，而是一个 文本节点。

也就是说，DOM 不是“只有标签的一棵树”，而是“标签、文本、注释等混合组成的一棵树”。

4）DOM 树到底长什么样

理解 DOM，最重要的是建立“树”的思维。

例如：

html

<ul id="todo-list">
  <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ul>

对应的 DOM 可以粗略理解为：

text

ul#todo-list
├── li
│   └── "Learn HTML"
├── li
│   └── "Learn CSS"
└── li
    └── "Learn JavaScript"

于是很多 DOM API 就很好理解了：

parentNode / parentElement：父节点
childNodes：所有子节点
children：所有子元素
firstChild / lastChild
nextSibling / previousSibling

例如：

const list = document.querySelector('#todo-list')
console.log(list.children.length) // 3
console.log(list.firstElementChild.textContent) // Learn HTML

当你把页面当树来理解，DOM API 本质上就是“树的查询与修改工具”。

5）最常用的 DOM 操作：选中、读取、修改

5.1 选中元素

现代前端里最常用的是 querySelector 和 querySelectorAll：

const title = document.querySelector('h1')
const items = document.querySelectorAll('li')

它们的优势是：可以直接使用 CSS 选择器语法。

比如：

document.querySelector('#app')
document.querySelector('.card.active')
document.querySelector('input[type="email"]')

这也是为什么 querySelector 成为最推荐的现代写法——它直观、统一，而且与 CSS 选择器共享一套思维模型。

5.2 读取文本和属性

const link = document.querySelector('a')
console.log(link.textContent)
console.log(link.href)

5.3 修改内容

const title = document.querySelector('h1')
title.textContent = 'DOM 学习中'

5.4 修改结构

const ul = document.querySelector('ul')
const li = document.createElement('li')
li.textContent = 'Learn DOM'
ul.appendChild(li)

这段代码的意思是：

创建一个新的 li 元素节点
给它设置文本内容
把它追加到 ul 的子节点末尾

这就是典型的 DOM 树修改。

6）事件也是 DOM 世界的一部分

很多人把 DOM 理解成“查元素 + 改内容”，但其实事件系统也是 DOM API 的核心组成部分。

例如：

const button = document.querySelector('button')
 
button.addEventListener('click', () => {
  alert('你点击了按钮')
})

这里你不仅拿到了 DOM 元素，还给它绑定了交互行为。

所以从工程视角看，DOM 至少包含三层能力：

表示页面结构：树状节点模型
提供查询与修改 API：选中、创建、删除、替换
承载事件交互：点击、输入、提交、键盘、滚动等

这也是为什么说 DOM 不是“一个对象”那么简单，而是一整套浏览器文档交互模型。

7）`innerHTML`、`innerText`、`textContent` 到底有什么区别

这是 DOM 初学阶段最容易混淆的一组概念。

`textContent`

表示节点及其后代节点的纯文本内容。

const p = document.querySelector('p')
p.textContent = '<strong>Hello</strong>'

页面上会看到的是：

text

<strong>Hello</strong>

也就是说，它把内容当普通文本处理，不解析为 HTML。

`innerHTML`

表示元素内部的 HTML 结构。

p.innerHTML = '<strong>Hello</strong>'

这时页面上会真正渲染出加粗的 Hello。

怎么选

如果你只是想安全地设置文本内容，优先使用：

textContent

如果你确实要插入一段 HTML 结构，才考虑：

innerHTML

因为 innerHTML 不只是“更方便”，它还意味着：

浏览器需要重新解析字符串
可能带来更多渲染和结构更新成本
如果拼接了不可信输入，可能引入 XSS 风险

所以一个非常实用的原则是：

能用 textContent，就不要先用 innerHTML。

8）DOM 常见误区

误区 1：DOM 就是 HTML

不对。

HTML 是文档源码，DOM 是浏览器解析后在内存里的对象模型。两者有关联，但不是一回事。

误区 2：DOM 里只有元素节点

不对。

文本、注释、文档本身也都是节点。DOM 树不是“标签树”，而是“节点树”。

误区 3：JavaScript 直接修改了 HTML 文件

不对。

JavaScript 修改的是当前页面运行时的 DOM 状态，不是你磁盘里的 .html 文件。

误区 4：用了框架就不用懂 DOM 了

也不对。

框架确实帮你减少了手写 DOM 操作，但事件、表单、焦点、滚动、选择器、挂载节点、浏览器 API 这些问题，最终还是落回 DOM。

不会 DOM，很多前端问题你只能“背框架 API”，但看不清底层发生了什么。

误区 5：DOM 慢，所以不要碰 DOM

这也是过度简化。

真正的问题通常不是“碰了 DOM 就慢”，而是：

一次做了太多无意义更新
频繁读写布局信息，触发反复计算
DOM 树过大，导致布局和渲染成本上升

所以更准确的说法应该是：

不合理的 DOM 操作会影响性能，而不是 DOM 本身天然不能碰。

9）为什么“频繁操作 DOM 很慢”

这句话有一半对，一半不对。

对的部分在于：DOM 变更往往会影响浏览器后续工作，比如样式计算、布局（layout）、绘制（paint）。

尤其当页面节点很多时，浏览器处理这些步骤的成本会上升。

例如你反复执行这种逻辑：

for (let i = 0; i < 1000; i++) {
  element.style.width = `${i}px`
  console.log(element.offsetWidth)
}

更合理的思路通常是：

批量更新，减少零碎修改
尽量把“读”和“写”分开
不要在高频循环里反复触发布局相关读取
避免让 DOM 树复杂到失控

对于初学者来说，只要先记住一句话：

DOM 操作不是不能做，而是要避免无意义、高频、打断浏览器优化节奏的操作。

10）从工程角度看，学 DOM 到什么程度算够用

如果你是前端初学者到中级开发者，至少要掌握这些：

必会概念

DOM 是浏览器中的文档对象模型
DOM 是树结构，不是扁平列表
Document、Node、Element 的层级关系
元素节点与文本节点的区别

必会 API

querySelector / querySelectorAll
textContent / innerHTML
createElement
appendChild / removeChild
classList
setAttribute / 直接属性读写
addEventListener

必会意识

DOM 改动会影响浏览器渲染流程
innerHTML 要谨慎，尤其面对用户输入
框架不是替代 DOM，而是更高层的抽象

如果这些概念你已经顺了，后面学 React、Vue、事件冒泡、表单、Shadow DOM、渲染优化时，就会轻松很多。

11）一句话总结

如果只用一句话概括 DOM，那就是：

DOM 是浏览器把文档表示为对象树的一种模型，让 JavaScript 能以编程方式读取、修改和监听页面。

你可以把它理解成“页面在浏览器里的可编程形态”。

前端开发里，HTML 负责描述内容，CSS 负责描述样式，而 DOM 则是让页面“可被程序操作”的那一层桥梁。

理解了 DOM，你才真正开始理解浏览器中的页面到底是什么。

参考资料

MDN Web Docs: DOM（Glossary）
MDN Web Docs: HTML DOM API / Node / DOM scripting
web.dev: Avoid large, complex layouts and layout thrashing

什么是 DOM？从文档树到页面交互，一次讲清 Document Object Model

1）先说结论：DOM 不是 HTML，本质上是“对象化后的文档模型”

2）为什么浏览器需要 DOM

3）DOM 里最重要的几个概念

3.1 document

3.2 Node

3.3 Element

3.4 文本节点

4）DOM 树到底长什么样

5）最常用的 DOM 操作：选中、读取、修改

5.1 选中元素

5.2 读取文本和属性

5.3 修改内容

5.4 修改结构

6）事件也是 DOM 世界的一部分

7）innerHTML、innerText、textContent 到底有什么区别

textContent

innerHTML

怎么选

8）DOM 常见误区

误区 1：DOM 就是 HTML

误区 2：DOM 里只有元素节点

误区 3：JavaScript 直接修改了 HTML 文件

误区 4：用了框架就不用懂 DOM 了

误区 5：DOM 慢，所以不要碰 DOM

9）为什么“频繁操作 DOM 很慢”

10）从工程角度看，学 DOM 到什么程度算够用

必会概念

必会 API

必会意识

11）一句话总结

参考资料

延伸阅读

什么是 DOM？从文档树到页面交互，一次讲清 Document Object Model

1）先说结论：DOM 不是 HTML，本质上是“对象化后的文档模型”

2）为什么浏览器需要 DOM

3）DOM 里最重要的几个概念

3.1 document

3.2 Node

3.3 Element

3.4 文本节点

4）DOM 树到底长什么样

5）最常用的 DOM 操作：选中、读取、修改

5.1 选中元素

5.2 读取文本和属性

5.3 修改内容

5.4 修改结构

6）事件也是 DOM 世界的一部分

7）innerHTML、innerText、textContent 到底有什么区别

textContent

innerHTML

怎么选

8）DOM 常见误区

误区 1：DOM 就是 HTML

误区 2：DOM 里只有元素节点

误区 3：JavaScript 直接修改了 HTML 文件

误区 4：用了框架就不用懂 DOM 了

误区 5：DOM 慢，所以不要碰 DOM

9）为什么“频繁操作 DOM 很慢”

10）从工程角度看，学 DOM 到什么程度算够用

必会概念

必会 API

必会意识

11）一句话总结

参考资料

延伸阅读

3.1 `document`

3.2 `Node`

3.3 `Element`

7）`innerHTML`、`innerText`、`textContent` 到底有什么区别

`textContent`

`innerHTML`

3.1 `document`

3.2 `Node`

3.3 `Element`

7）`innerHTML`、`innerText`、`textContent` 到底有什么区别

`textContent`

`innerHTML`