前端
文档对象模型DOM
你可能会问
文档对象模型到底是什么？JavaScript 是怎么「摸到」页面上那个按钮的？
简单来说
浏览器把 HTML 页面表示成的树状结构，JavaScript 可以读取和修改它。
HTML
<nav>导航
<main>正文容器
<button>按钮
拉一下树上的线，木偶就动
01 · 先这样理解
把抽象概念放进真实场景
浏览器把 HTML 页面表示成的树状结构，JavaScript 可以读取和修改它。
换个角度想可以把 DOM 想成提线木偶：屏幕上你看到的是木偶，每根线都连着幕后的一个节点。JavaScript 不直接碰木偶，它拉的是线——改哪个节点，对应的那块页面就动。
02 · 点击演示
改一个节点，页面哪里会动？
突出显示的部分，就是当前概念在整条流程中负责的位置。
- 写好的标签
<nav>导航<main>正文容器<button>按钮 body
├─ nav
└─ main
├─ h1
└─ button
querySelector('button')
沿着树找到它
text└─ button · "开始体验"
1 / 4
HTML · 写下嵌套的标签
03 · 放进真实任务
什么时候会遇到它
动态更新
收到新消息时，往列表树里插入一个新节点。
读取内容
表单提交前，从输入框节点里读出用户填了什么。
排查异常
按钮点了没反应？先看它在不在树里、绑没绑事件。
04 · 想一想
用一个问题检查理解
页面上明明看得到那个按钮，代码里却怎么都找不到它。可能出了什么事？
查看答案
常见原因有两个：选择器写错了（类名或层级对不上），或者代码在按钮被加进树之前就跑了——那一刻树里还没有这个节点，自然找不到。
最容易踩的坑
频繁大改 DOM 很昂贵：每次修改都可能让浏览器重新计算布局。现代框架帮你批量、最小化地改树，这正是它们存在的理由之一。