JavaScript 认识 DOM

学到这里，JavaScript 一直在操作数据和函数，还没有碰过网页。从这一篇开始进入浏览器操作网页的部分，主角就是 DOM。DOM 是 Document Object Model 的缩写，中文叫文档对象模型。

DOM 是什么

浏览器拿到 HTML 文档后，会把文档转换成一棵 JavaScript 能操作的对象树，这棵树就是 DOM。可以这样理解，HTML 是写给人看的文本，DOM 是浏览器为 JavaScript 准备的同款数据结构。有了 DOM，JavaScript 才能找到页面上的元素、修改内容、响应点击。

document 对象表示整个页面文档，是所有 DOM 操作的入口。后面几篇的获取元素、创建元素，全都要从 document 出发。

浏览器解析 HTML 时按下面的规则转换。

看一个具体例子。

<!DOCTYPE html>
<html>
  <head>
    <title>首页</title>
  </head>
  <body>
    <h1>你好</h1>
    <p>这是正文</p>
  </body>
</html>

这段 HTML 转换成的 DOM 树大致长这样。

html
├── head
│   └── title
│       └── "首页"（文本节点）
└── body
    ├── h1
    │   └── "你好"（文本节点）
    └── p
        └── "这是正文"（文本节点）

每个节点在树里都有确定的上下级位置，JavaScript 顺着这棵树就能找到页面上的任意一个元素。

树形结构是 DOM 最核心的特点，可以记住下面几点。

如果觉得抽象，可以拿家谱来类比，html 是祖辈，head 和 body 是父辈，title、h1 是子辈，一层一层往下。或者拿文件夹来类比，html 是根目录，里面套着 head 文件夹和 body 文件夹，文件夹里还能继续套文件夹。

不管类比成什么，本质都是一句话，页面上的所有内容都能在这棵树里找到位置，JavaScript 的操作目标就是树上的节点。

上面提到节点分好几种，元素节点只是其中一种。常见的还有文本节点（标签之间的文字）、注释节点（ 里的内容）等。后面的教程主要操作元素节点，其他节点知道存在即可，不展开。