4.5　理解文档对象模型

当Web浏览器载入一个HTML文件时，它会在屏幕上显示文件的内容（当然，使用CSS适当样式化）。但是，这不是Web浏览器对标签、属性以及文件内容所做的所有事情，它还创建并记忆了该页面的HTML的一个“模型”。换句话说，Web浏览器记住了HTML标签、它们的属性以及它们在文件中出现的顺序，页面的这些表示叫做文档对象模型（Document Object Model, DOM）。

DOM提供了JavaScript和Web页面上的元素通信所需的信息。DOM还提供了导航页面、改变页面以及在页面上添加HTML所必需的工具。DOM本身不是真正的JavaScript，它是万维网联盟（World Wide Web Consortium, W3C）的一个标准，大多数的浏览器厂商采用这个标准并将其添加到其浏览器中。DOM使得JavaScript能够和页面的HTML通信并修改页面的HTML。

为了理解DOM是如何工作的，首先查看下面这个非常简单的Web页面：

＜！DOCTYPE HTML＞

＜html＞

＜head＞

＜meta charset="UTF-8"＞

＜title＞A web page＜/title＞

＜/head＞

＜body class="home"＞

＜h1 id="header"＞A headline＜/h1＞

＜p＞Some＜strong＞important＜/strong＞text＜/p＞

＜/body＞

＜/html＞

在这里以及所有其他的Web站点上，一些标签还包含其他的标签，例如，＜html＞标签就包含所有其他的标签；还有＜body＞标签也包含其他标签以及出现在浏览器窗口中的内容。可以用一种家族树（如图4-3所示）来表示标签之间的关系。＜html＞标签是树的“根”，就像是页面上所有其他标签的最老的“祖母”，而其他的标签表示家族树的不同“分支”，例如，＜head＞标签和＜body＞标签，每一个都包含各自的一组标签。

图　4-3　HTML页面的基本嵌套结构，其中标签包含其他标签，常常表现为家族树的形式，而包含其他标签的标签叫做祖先，位于其他标签中的标签叫做子孙

除了HTML标签外，Web浏览器还记录了出现在标签中的文本（例如，图4-3中的＜h1＞标签中的“A headline”），以及分配给每个标签的属性（图4-3中应用于＜body＞和＜h1＞标签的class属性）。实际上，DOM把每一个这样的标签（也叫做元素）、属性和文本都当做独立的单元，叫做节点。

JavaScript提供了几种方法来从一个页面中选择元素，以便可以对这些元素做些事情，例如，让它们淡出视线或者在页面中动画地穿过。document.getElementById（）方法允许使用应用于元素的HTML的一个特定ID来选择该元素。因此，如果你有一个＜div＞标签，并且对它应用了ID banner，即＜div id=“banner”＞，那么可以像下面这样选择它：

document.getElementById（'banner'）；

同样，document.getElementsByTagName（）方法选择一个特定标签的每个实例，例如，document.getElementsByTagName（'a'）选择了页面上的所有锚标签（链接）。并且，一些浏览器支持使用特定类选择所有元素的方法，或者支持使用CSS选择器来选择页面元素。