本文共 1041 字，大约阅读时间需要 3 分钟。

1.回顾

在说JavaScript之前，我们先来回顾一下JavaScript ，html，css的区别。

html：用来显示内容。 css：用来设置页面显示内容的样式，比如颜色等。 JavaScript：用来触发页面上的各种事件，比如，点击按钮事件，图片自动切换事件等。 　　那么，JavaScript是如何控制这些事件呢，主要就是靠DOM和BOM。下面我们来了解一下什么是BOM和DOM。 我们都知道javas主要分为三个部分，如下图。 　　 ECMAScript标准：js的基本语法。这个对于页面的操作没有任何的做用。 DOM：document object model——》文档对象模型——用来操作页面的元素。 BOM：browser object model ——》浏览器对象模型——用来操作浏览器对象。

了解了这些，那我们接下来就看看什么是DOM吧。

２.简介：

DOM 是文档对象模型，我们先来了解一下什么是文档。个人感觉直接看官方的简介非常的难懂，应该是我对水平有待提高吧。

２.１文档：

一个html页面文件就是一个文档，由于万物都是对象。所以把这个文档页看做对象。

另外，xml文件也是一个文件。 　　xml与html文件的区别： 　　　xml中元素可以自定义。侧重于数据存储。 　　　html中元素有系统提供。侧重于内容显示。

2．2理解：html 文件和标签、节点的关系？

• Html 文件看成一个对象，那么这个文档就可以看成一个对象，文档中的每一个的标签也可以看成一个对象。
• 页面中的每个标签，都是一个元素（element），每个元素都可以看成一个对象。
• 标签可以嵌套，标签中有标签，元素中有元素。
• 页面中所有的标签都是元素，元素也可以看成对象。
• 节点（node）：页面中所有的内容都是节点。包括：标签，属性，文档。

2．３总结：

为此，我就可以理解为DOM就是人家定义好的一种操作html文档中各个对象的标准，只要按照这个标准，咱们就可以在html文档中为所欲为了。

3树状图：

文档以及文档中的所以的元素（标签）组成的一个树形结构图，叫做树状图。

正如下图所示，这就是DOM的树状图。那么这个图为什么这么画呢。

大家都知道，我们新建一个html文档，结构如下图。

html页面都有一个跟标签—— 也可以叫做根元素。 页面中有一个根元素（也叫标签——html），根元素里面有很多的元素。

那么根元素中包括了和标签。

另外，这个两个标签中又可以包含如下的标签。