HTML 的本质是一棵树DOM
基础篇在铺路进阶看本质
进阶
基础篇里，Markdown 视角与视觉视角（框 / 字 / 图）已经够你搭结构、读嵌套。 进阶篇再往下挖一层：浏览器真正吃进去的是什么？ 答案是 DOM 树——不是磁盘上的字符串本身。
HTML 文件不是页面DOM 才是
核心
你写在磁盘上的 .html 只是文本。
浏览器读入后会解析成内存里的一棵树：每个标签变成一个节点，嵌套变成父子关系。
这棵树叫 DOM（Document Object Model，文档对象模型）。
之后屏幕上画什么、JS 改什么、读屏读什么，操作的都是这棵树——不是原始字符串本身。
三棵树，同一套嵌套Markdown · 图层 · DOM
同一张卡片，三种说法：
| 视角 | 你看到的 | 本质 |
|---|---|---|
| Markdown | 标题、列表、段落写法 | 描述「有什么结构」的文本 |
| 视觉图层 | 框套框，字挂在框里 | 嵌套的图层树 |
| DOM | 浏览器解析后的节点树 | 页面真正的运行时结构 |
图层 ↔ 标签，仍是同一棵树（悬停可联动）：
Card
Header
Title
Description
Button
<div class="card"><div class="header"><h3>标题</h3><p>一段描述…</p></div><button>了解更多</button></div>
视觉视角
一棵图层树。框套框，每个图层有名字、有层级、有缩进。
代码视角
一棵标签树。<div> 套 <div>，每个标签有名字、有层级、有缩进——一模一样的事。
树上有什么元素 · 文本 · 文档
DOM 里常见几类节点（先记这三种就够）：
| 类型 | 例子 | 对应直觉 |
|---|---|---|
| Document | 整页文档的根 | 整份画布 / 整份文件 |
| Element |
| Frame / 标签容器或控件 |
| Text | 「标题」「一段描述…」 | 图层里的 Text |
提示
源码里写 <h3>标题</h3>，DOM 里通常是：
一个 h3 元素节点，下面挂一个内容为「标题」的 文本节点。
树 = 父子关系，不是平面列表。
最小合法骨架html · head · body
浏览器眼里，一页大致长这样（缩进 = 父子）：
记法
<head> 不负责页面上的可见布局；
用户看到的结构几乎都在 <body> 里。
改界面、对设计稿，默认想的是 body 里的那棵子树。
html
├── head ← 给浏览器 / 搜索引擎的元信息（标题、字符集…）
│ └── title
└── body ← 你真正「看见」的内容都在这
├── header
├── main
└── footer去哪看见 DOM开发者工具 Elements
浏览器打开任意页面 → 右键「检查」→ Elements / 元素 面板：那就是当前的 DOM 树（可能被 JS 改过，与磁盘上的 HTML 不完全相同）。
- 点选节点 ≈ 选中一个图层
- 缩进 ≈ Frame 套娃
- 右侧样式 ≈ 下一章要讲的 CSS（挂在节点上的外观规则）
和 JS 的关系
后面讲交互时会说：JS 通过 DOM API 找节点、改文字、改 class、增删节点—— 改的是树上的对象，浏览器再根据新树重绘。 现在只需记住：DOM 是 JS 操作页面的把手。