Javascript DOM 编程实例讲解--仿LightBox效果提示框（2）

什么是DOM？

DOM是“Document Object Model”（文档对象模型）的首字母缩写。

D就是Document（文档），如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。

O就是Object(对象)，在人类语言中，“对象”这个词的含义往往不那么明确和具体，它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中，“对象”这个词的含义非常明确和具体。Javascript中“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方法。

JavaScript语言里的对象可以分为三种类型：

  ●用户定义对象（user-defined object）：由程序员自行创建的对象（类）。这里我们不讨论这种对象。

  ●内建对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date等。这里我们不讨论这种对象。

  ●宿主对象（host object）：由浏览器提供的对象，这里是我要重点介绍的。

宿主对象它们当中最基础的是window对象，window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）————但我觉得称之为Window Object Model（窗口对象模型）更为贴切。

不过在这里我们将把注意力集中在浏览器窗口的内部，我们将着重探讨如何对网页的内容进行处理，而用来实现这一目标的载体就是document对象。（呵呵，在我们的代码中，“document”出现的频率十分频繁）

现在，我们已经对DOM中的字母“D”（document，文档）和字母“O”（object，对象）做了解释，那么字母“M”又代表着什么呢？

M就是Model（模型），但说它代表着“Map”（地图）也未尝不可。模型也好，地图也罢，它们的含义都是某种事物的表现形式。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。现在就让我们来看一个地图：

图二

看到这个地图了吧。既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图，就必须知道这些记号的含义和用途——这个道理同样适用于DOM。要想从DOM获得信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。

DOM把一份文档表示为一棵树（这里所说的“树”是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体地说，DOM把文档表示为一棵家谱树。

家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系并使用parent（父）、child（子）、sibling（兄弟）等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来：一位特定的家族成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。

NodeType(节点类型)

说到DOM的成员关系，我又不得不介绍以下另外一个概念--NodeType(节点类型)，我们的DOM的NodeType有12种不同的类型，在这里我就用一段代码来做介绍了:

// 枚举DOM节点的NodeType类型
if(typeof Node == "undefined"){
     var Node = {
           ELEMENT_NODE: 1,
           ATTRIBUTE_NOTE: 2,
           TEXT_NODE: 3,
           CDATA_SECTION_NODE: 4,
           ENTITY_REFERENCE_NOTE: 5,
           ENTITY_NODE: 6,
           PROCESSING_INSTRUCTION_NOTE: 7,
           COMMENT_NODE: 8,
           DOCUMENT_NODE: 9,
           DOCUMENT_TYPE_NODE: 10,
           DOCUMENT_FRAGMENT_NODE: 11,
           NOTATION_NODE:12
     }  
}

这么多的类型中，我们常用的就只有Element Node（元素节点）、Attribute Node（属性节点）、Text Node（文本节点），而这3个中，我们接触最多的就是Element Node 。