JavaScript: DOM 简介
最后更新：2026-10-13
DOM 是 JavaScript 操作网页的唯一桥梁。没有 DOM，JS 就是一门纯计算语言；有了 DOM，JS 就能"看见"页面、修改页面、让页面活起来。
1. DOM 树与 document 对象
DOM 全称 Document Object Model（文档对象模型）。浏览器加载 HTML 后，不是把 HTML 当纯文本存着，而是把它翻译成一棵对象树——每个 HTML 标签变成一个对象（叫节点），标签之间的嵌套关系变成树形的父子关系。
你可以把 DOM 想象成一颗倒着长的树：最上面是树根（document），往下分出枝干（html、head、body），再往下是更细的枝叶（div、p、span...）。
(2) DOM 树的结构
一个简单 HTML 页面的 DOM 树大致如下：
HTML
document
└── html
├── head
│ ├── meta
│ └── title
└── body
├── h1
├── p
└── div
└── span
document是 DOM 树的根节点，也是 JS 访问 DOM 的入口html是 document 的唯一子元素（文档元素）head和body是 html 的两个子元素- 后面层层嵌套，形成完整的树
(3) 节点类型
DOM 中有三种核心节点类型：
| 节点类型 | 说明 | nodeType 值 |
|---|---|---|
| 元素节点 | HTML 标签，如 p、div |
1 |
| 文本节点 | 标签内的文字内容 | 3 |
| 属性节点 | 标签的属性，如 class、id |
2（已不推荐使用） |
HTML
<p class="intro">Hello World</p>
上面这一行中：<p> 是元素节点，class="intro" 是属性节点，Hello World 是文本节点。日常开发中，你操作最多的就是元素节点。
(4) document 对象
document 是 DOM 的入口，浏览器自动提供这个全局对象。通过它可以：
- 获取页面元素：
document.getElementById()、document.querySelector() - 创建新元素：
document.createElement() - 读写页面内容：
document.title、document.body - 监听页面事件：
document.addEventListener()
(5) DOM 的作用
JS 本身不能"看见"网页——它只能做计算。DOM 就是那双"眼睛"和"手"：
- 读取：获取页面上的文字、属性、样式
- 修改：改变文字内容、属性值、CSS 样式
- 添加：创建新元素并插入页面
- 删除：移除页面上的元素
- 监听：响应用户的点击、输入等操作
没有 DOM，JS 和 HTML 就是两个互不相干的东西。DOM 把它们连在了一起。
▶ 示例：查看 DOM 结构
▶ 试一试▶ 示例：document 对象探索
▶ 试一试▶ 示例：节点类型判断
▶ 试一试❓ 常见问题
Q DOM 是 JavaScript 的一部分吗？
A 不是。DOM 是 W3C 制定的标准，JavaScript 只是提供了操作 DOM 的 API。Node.js 没有 DOM，因为它不是浏览器环境。把 DOM 和 JS 混为一谈是新手常见误区。
Q 为什么
childNodes 里会有空文本节点？A HTML 中的换行和缩进在 DOM 中会被解析为文本节点。比如标签之间的换行就是一个文本节点（内容是换行符）。如果只想获取元素节点，用
children 代替 childNodes。Q 修改 DOM 会影响页面性能吗？
A 会。每次修改 DOM 都可能触发浏览器的重新布局（reflow）和重绘（repaint），频繁操作 DOM 是性能杀手。最佳实践是：先在内存中拼好所有修改，最后一次写入 DOM。
📖 小节
- DOM 是 HTML 文档的树形结构表示，每个 HTML 标签对应一个 DOM 节点
document对象是 DOM 的入口，document.getElementById()按 ID 查找元素document.querySelector()用 CSS 选择器查找第一个匹配元素，querySelectorAll找全部- 节点类型：元素节点（HTML 标签）、文本节点（文字内容）、属性节点（标签属性）
- DOM 树的核心操作：查找节点、读取属性、修改内容、添加/删除子节点
📝 作业
- 打开浏览器开发者工具（F12），在 Console 中输入
console.dir(document)，观察 document 对象有哪些属性和方法，列出 5 个你认识或觉得有意思的。 - 写一段代码：获取当前页面的
body元素，打印它的childElementCount（子元素个数），然后用children遍历所有子元素，打印每个子元素的标签名。 - 解释"元素节点"和"文本节点"的区别。给定
<div>Hello <b>World</b></div>，画出它的节点树结构，标明每个节点的类型。
