WEBVTT
Kind: captions
Language: zh-CN

00:00:01.250 --> 00:00:09.640
DOM 也就是文档对象模型的简称 (Document Object Model)

00:00:10.039 --> 00:00:14.910
文档对象模型 听起来有一定道理

00:00:14.910 --> 00:00:20.655
它是我们 Web 文档渲染的一种模型

00:00:20.655 --> 00:00:26.359
我们可以把它看做是一个树形结构 有着不同的节点

00:00:26.359 --> 00:00:32.195
这些节点都是添加上去的 就好像我们之前看见的 p 标签和 a 标签

00:00:32.195 --> 00:00:35.884
所以 DOM 通过一颗逻辑树的方式显示文档

00:00:35.884 --> 00:00:40.429
每个分支都以一个节点结尾 每个节点都包含一个对象

00:00:40.429 --> 00:00:43.490
DOM 允许你以编程的方式访问树

00:00:43.490 --> 00:00:48.695
然后你可以更改文档的样式 结构和内容等等

00:00:48.695 --> 00:00:51.469
不过为什么要用树的方式表示呢？

00:00:51.469 --> 00:00:54.619
因为 DOM 从一个根节点开始

00:00:54.619 --> 00:00:58.114
然后不断分支为不同的子项

00:00:58.115 --> 00:01:01.984
每个子项也可以继续分支成更小的子项 每个子项都是一个树形结构

00:01:01.984 --> 00:01:03.509
我们来看一看

00:01:03.509 --> 00:01:09.370
你可以看到在最顶部 我们有一个 HTML 节点

00:01:09.370 --> 00:01:12.484
这是我们的顶层节点 然后也会有一个

00:01:12.484 --> 00:01:15.230
head 节点 如果我们展开它

00:01:15.230 --> 00:01:18.020
可以看见我们放置在 head 内部的任何元素也显示在里面

00:01:18.019 --> 00:01:19.519
这是第一级

00:01:19.519 --> 00:01:22.204
第二级 有一个 body 元素

00:01:22.204 --> 00:01:27.754
我们在 body 标签内部编写的内容

00:01:27.754 --> 00:01:31.660
都显示在这个 body 里面

00:01:31.659 --> 00:01:34.234
这就是我们所看到的 DOM

00:01:34.234 --> 00:01:41.370
DOM 会按照我们放置的顺序依次显示元素