本章内容：
1）节点的概念
2）5个常用的DOM方法：getElementById , getElementsByTagName , getElementsByClassName , getAttribute , setAttribute
终于要与DOM面对面了。本章将介绍DOM，让我们一起透过DOM去看世界。
3.1 文档：DOM 中的 "D"
如果没有 document （文档），DOM 也就无从谈起。当创建了一个见面并把它加载到Web中浏览器中时，DOM就在幕后悄然而生。它把你编写的见面文档转换为一个文档对象。
在人类的语言中，“对象”这个词的含意往往还是那么的明确，它几乎可以用来称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义就非常明确。
3.2 对象：DOM 中的 “O"
对象是一种自足的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；只能通过某个特定对象去调用的函数被称为这个对象的方法。
JavaScript 语言对象可以分为三种类型。
1》》用户自定义对象（user-defined-object ）：由程序员自行创建的对象。本书不讨论这种对象。
2》》内建对象（native object ）：内建对象在JavaScript 语言里的对象，如Array , Math , Date 等。
3》》宿主对象 （ host object ) : 由浏览器提供的对象。
window 对象对应着浏览器窗口本身，这个对象的属性和方法通常统称为 BOM （ 浏览器对象模型 ），但我觉得称为 Window Object Model （窗口对象模型 ）更为贴切。BOM 提供了 window.open 和 window.blur 等方法，这些方法某种程度上要为到处被滥用的各种弹出窗口和下拉菜单负责。难怪 JavaScript 没有一个好名声！
值得庆幸的是，我们不需要与BOM 打太多的交道，而是把注意力集中在浏览器窗口内的网页内容上。document 对象的主要功能就是处理见面内容。后面我们只讨论 document 对象的属性和方法。
3.3 模型：DOM 中的 ”M"
DOM 中的 M 代表着 “Model” （模型），也可以说它代表着 ''Map" （地图）。模型也好，地图也罢，它们的含义都是某种事物的表现形式。就像是一个火车模型代表着一列真正的火车，一张城市街道图代表着一个实际存在的城市那样，DOM 代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图（或者说是模型），而我们可以通过 JavaScript 去读取这张地图，
既然是地图，就必须有诸如方向，等高线和比例尺之类的图例。要想看懂和使用地图，就必须知道这些图例的含义和用途，这个道理同样适用于DOM。要想从DOM 中获得信息，就必须先把各种表示和描述文档的“图例” 弄明白。
DOM 把一份文档表示为一棵树（这里所说的“树”是数学概念上的概念），这是我们理解和运用这一模型的关键。更具体地说，DOM 把文档表示为一棵家谱树。
家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系。并使用 parent-父 ，child-子 ， sibling-兄弟 等来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明的表示出来：一位特定的家族成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。
家谱树非常适合用来表示一份用 （X）HTML 编写出来的文档。如下的基本网页内容
<html> <head> <meta charset="utf-8" /> <title>Shopping list </title> </head> <body> <h1>What to buy </h1> <P title = "a gentle reminder ">Don't forget to buy this stuff</P> <ul> <li>A tin of beans</li> <li class='sale'>Cheese</li> <li class='sale'>Milk</li> </ul> </body> </html>
这份文档可以用图示模型来表示。
现在我们来分析一下这个网页的结构。了解它的构成，看看它为什么那么适合用前面提到的模型表示。DOCTYPE 之后，一个打开了的 <html> 标签标识整个文档，这个网页中的所有内容都饮食在其内部，这表示它至少是一个父亲-parent。又因为所有其它的元素都包含在其内部，所以这个<html> 标签即没有父亲，也没有兄弟。如果这是一棵真正的树，这个<html> 标签就是树根。
根元素是html。不管从哪个角度看，html 都代表着整个文档。
接下来深入一层，我们发现有<head>和<body> 分支，它们位于同一层次，且互不包含，所以它们是兄弟关系。它们有着共同的父元素<html> 但又各有各的子元素，所以它们本身又是其它元素的父元素。
<head> 有两个子元素：meta 和 title ,这两个是兄弟关系。<body> 元素有三个子元素：h1,p,ul 这三个是兄弟关系。继续深入下去，我们发现 ul 也是一个父元素，它有三个子元素，它们是li 元素，有一些class属性。
利用这种简单的家谱关系记号，我们可以把各元素之间的关系简明清晰地表达出来。例如，h1 和 ul 是什么关系？答案是它们是兄弟关系。
如果你能把一个文档的各种元素想象成一棵家谱树，我们就可以用同样的术语描述 DOM 。不过，与使用 “家谱树” 这个术语相比，把文档称为“节点树“ 更为准确。