目录

术语 · 前端

文档对象模型

DOM

浏览器把 HTML 页面表示成的树状结构，JavaScript 可以读取和修改它。

HTML 变成一棵可操作的树

HTML

<nav>导航

<main>正文容器

<button>按钮

标签嵌套的文档

拉一下树上的线，木偶就动

浏览器把标签解析成节点树，JavaScript 改的是树，页面跟着树变。

换个角度想

可以把 DOM 想成提线木偶：屏幕上你看到的是木偶，每根线都连着幕后的一个节点。JavaScript 不直接碰木偶，它拉的是线——改哪个节点，对应的那块页面就动。

改一个节点，页面哪里会动？

写好的标签
<nav>导航
<main>正文容器
<button>按钮
body
├─ nav
└─ main
├─ h1
└─ button
querySelector('button')
沿着树找到它
text
└─ button · "开始体验"

写下嵌套的标签

什么时候会遇到它

动态更新
收到新消息时，往列表树里插入一个新节点。
读取内容
表单提交前，从输入框节点里读出用户填了什么。
排查异常
按钮点了没反应？先看它在不在树里、绑没绑事件。

想一想

页面上明明看得到那个按钮，代码里却怎么都找不到它。可能出了什么事？

看答案

常见原因有两个：选择器写错了（类名或层级对不上），或者代码在按钮被加进树之前就跑了——那一刻树里还没有这个节点，自然找不到。

最容易踩的坑

频繁大改 DOM 很昂贵：每次修改都可能让浏览器重新计算布局。现代框架帮你批量、最小化地改树，这正是它们存在的理由之一。