一、DOM 简介
JavaScript 初期还提供了一种初级的 DOM，下面让我们一起来看看什么是 DOM 吧。
（1.DOM 是什么）
DOM 是 Document Object Model（文档对象模型）的缩写,是一套对文档内容进行抽象和概念化的方法。在此外我们还要了解下 DHTML
（2.DHTML 是什么）
DHTML (动态 HTML )描述 HTML、CSS、JavaScript 技术组合的术语。
含义：
- 利用 HTML 把网页标记为各种元素
- 利用 CSS 设置元素样式和它们显示位置
- 利用 JavaScript 实时的对页面进行控制和更改样式
（3.DOM 发展历史）
关于 DOM 的发展历程，DOM 诞生于 1990 年代后期微软与 Netscape 的 "浏览器大战",双方为了在 JavaScript 与 JScript 一决生死，大规模的赋予浏览器强大的功能，但是微软和 Netspace 公司在开发DHTML方面使用不同的标准，使不少网页使用非微软平台及浏览器无法正常显示、互不兼容，此时负责制定 web 通信标准的 W3C 组织 开始着手规划 DOM。
二、对象
对象是一种非常重要的数据类型，对象是自包含的数据集合，通过两种形式访问分别是 属性 和 方法，文档中每个元素都是一个对象。
- 属性：某个特定对象的变量
- 方法：某个特定对象的才能调用的特定函数
（1.内建对象）
内建对象其实就是 JavaScript 中已经创建但未初始化的对象。就比如我们最常见的数组
Var arr = new Array();
当我们使用 new 关键字去初始化数组的时候，就是相当于在创建一个 Array 对象的实例了。
（2.宿主对象）
由浏览器预定义的对象被称为宿主对象，宿主对象包括 Form、Image、Element等，我们最常见的宿主对象就是 document 对象。
三、节点
关于节点我们看看 DOM 的概念，首先来分解下其词语， D 就是文档，O 对应这对象，M 对应模型，文档是由节点构成的集合，下面来看看是三种最常用的节点。
（1.元素节点）
DOM 的原子是元素节点，标签的名字叫就是元素的名字，每个元素所在的位置构成的文档的结构。
<p></p>
（2.文本节点）
文本节点被包含在元素节点的内部，例如元素 <p> 包含的文本内容 “ Hello Word ” ，他就是一个文本节点。
<p> Hello Word </p>
（3.属性节点）
属性节点用来对元素做出更具体的描述，被包含在元素节点内部。
<p style="color:red"; > Hello Word </p>
四、获取元素
有三种方法可以获取 DOM 元素节点。
（1. getElementById 方法）
我们首先创建一个 p 元素，然后给元素创建一个 id 值，用 getElementById 方法获取元素的文本节点。
<p id="box">Hello Word</p>
<script>
var a = document.getElementById("box").innerHTML;
alert(a);
</script>
让我们来看看效果
通过上图我们可以看到成功弹出了 id 为 box 的 p 元素的文本。
（2.getElementsByTagName 方法）
getElementsByTagName 方法返回的是一个对象数组，参数值是标签的名字
alert(document.getElementsByTagName("p").length);
让我们来看看效果
通过上图我们可以看到成功返回了一个数字，它代表 p 元素的数组值。
（3.getElementsByClassName 方法）
这个方法与 getElementsByTagName 类似，都是返回一个具有相同类名的元素数组，使用此方法还可以查找那些带有多个类名的元素。
总结：
- 一份文档就是一棵节点树
- getElementById 将返回一个对象，该对象对应着文档里得一个特定的元素节点
- getElementsByTagName 和 getElementsByTagName 将返回一个对象数组，分别对应文档里面特定的一组元素节点
- 每个节点都是一个对象
