1.4  关于文档对象模型

当HTML出现时，一个重要的设计决定是将其基于DOM(Document Object Model，文档对象模型)。这是一种将Web页面中的不同元素分成单独对象的方法，每个对象有其自己的属性和值。这是个明智的决定，因为这样就引入了样式表，使得Web页面的内容与其样式完全分开，同时使HTML文档易于用如JavaScript这样的语言修改，从而提供动态用户交互功能。

当将Web页面放入DOM中时，用CSS样式化其每个部分是很容易的。例如，每个标题将位于像<h1>…</h1>这样的标记对中，单个CSS指令就可以设置文档中所有这样的标记的样式，如可以改变使用的字体、字体大小及任意字体修饰等。这样就可以完全改变页面设计而不修改HTML，正如在后面的一些插件中将看到的，一些样式设置甚至可以使页面元素在鼠标划过时有动态效果(例如，改变其颜色和其他属性)或使用专门的浏览器扩展创建渐变效果。

1.4.1  DOM的工作原理

DOM将HTML文档的各个部分组成一个对象层次结构，每个对象有其自己的属性。术语“属性”用于表示对象的特性，如对象包含的HTML、对象宽度和高度等。

最外层的对象是window对象，它表示的是当前浏览器窗口、tab、iframe或弹出式窗口。在其下是document对象，可以有多个文档(例如将几个文档加载到同一页面的不同iframe中)。在文档中有一些其他对象，如页面头部和主体等。

在页面头部中，又有其他对象，如标题和元对象，而主体对象可包含大量其他对象，包括标题、锚、表单等的HTML标记。

图1-3显示了示例文档的DOM表示，其头部有一个标题Hello和一个元标记，其主体部分有3个HTML元素(链接、表单和图像)。当然，即使是最简单的Web页面，其结构也比这里的复杂，这里只是用于演示DOM的工作原理。从最外部开始是窗口，其中有一个文档，在该文档中是各种元素或对象，它们互相联系。

在图1-3中，属性用较黑的背景和斜体表示。例如，值robots是name的属性，name又是meta的属性，依此类推。尽管图中没有显示，元标记应还有另一个匹配的属性content，该属性包含一个字符串，指定哪个机器人可以访问Web页面的内容。

其他属性包括http://google.com(它是href标记的属性，href又是a的属性，依此类推)和Hello(它是title的属性)。所有其他项均是对象或对象参数名。如果将图1-3向纵向和横向扩展，则将显示出其他对象和属性。图中两个这样的地方用断开的虚线表示。

图1-3  显示头部和主体部分的DOM示例