第 5 章 文档对象模型(DOM) 文档对象模型（Document Object Model：DOM），最初是W3C为了解决浏览器混战时 代不同浏览器环境之间的差别而制定的模型 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 ，主要是针对 IE和Netscape Navigator。W3C 解释为：“文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构 和样式的语言平台，提供了标准的 HTML和 XML对象集，并有一个标准的接口来访问并操 作它们。”它使得程序员可以很快捷地访问 HTML或 XML页面上的标准组件，如元素、样 式表、脚本等等并作相应的处理。DOM标准推出之前，创建前端Web应用程序都必须使用 Java Applet或 ActiveX等复杂的组件，现在基于 DOM 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 ，在支持 DOM的浏览器环境中， Web开发人员可以很快捷、安全地创建多样化、功能强大的Web应用程序。本章只讨论HTML DOM。 5.1 DOM 概述 文档对象模型定义了 JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及 各功能部件的标准接口。主要包括如下方面： z 核心 JavaScript语言参考（数据类型、运算符、基本语句、函数等） z 与数据类型相关的核心对象（String、Array、Math、Date等数据类型） z 浏览器对象（window、location、history、navigator等） z 文档对象（document、images、form等） JavaScript使用两种主要的对象模型：浏览器对象模型（BOM）和文档对象模型（DOM）， 前者提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法；后者则 提供了访问浏览器窗口内容，如文档、图片等各种 HTML元素以及这些元素包含的文本的 操作方法。在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。 观察下面的简单 HTML代码： //源程序 5.1

Test!

Welcome to DOM World!

• Newer

在 DOM模型中，浏览器载入这个 HTML文档时，它以树的形式对这个文档进行描述， 其中各 HTML的每个标记都作为一个对象进行相关操作，如图 5.1所示。 图 5.1实例的家谱树 可以看出，html为根元素对象，可代表整个文档，head和 body两个分支，位于于同一 层次，为兄弟关系，存在同一父元素对象，但又有各自的子元素对象。 在支持脚本的浏览器发展过程中，出现了如下 6种不同的文档对象模型，如表 5.1所示： 表 5.1 文档对象模型的各个版本及浏览器支持 文档对象模型 浏览器支持 Basic Object Model（基本对象模型） NN2，NN3，IE3/J1，IE3/J2，NN4，IE4，IE5，NN6，IE5.5，IE6，Moz1，Safari1 Basic Plus Images（基本附加图像） NN3，IE3.01（Only for Mac），NN4，IE4，IE5，NN6，IE5.5，IE6，Moz1，Safari1 NN4 Extensions（NN4扩展） NN4 IE4 Extensions（IE4扩展） IE4，IE5，IE5.5，IE6(所有版本的一些功能需要Win32 OS) IE5 Extensions（IE5扩展） IE5，IE5.5，IE6(所有版本的一些功能需要Win32 OS) W3C DOM（W3C文档对象模型I、II） IE5，NN6，IE5.5，Moz1，Safari1（均为部分） 术语：IE4表示 Internet Explorer 4，NN4表示 Netscape Navigator 4，Moz1表示Mozilla1，其余类推 DOM不同版本的存在给客户端程序员带来了很多的挑战，编写当前浏览器中最新对象 模型支持的 JavaScript脚本相对比较容易，但如果使用早期版本的浏览器访问这些网页，将 会出现不支持某种属性或方法的情况。如果要使设计的网页能运行于绝大多数浏览器中，显 而易见将是个难题。因此，W3C DOM对这些问题做了一些标准化工作，新的文档对象模型 继承了许多原始的对象模型，同时还提供了文档对象引用的新方法。 下面介绍在所有支持脚本的浏览器中均可实现的最低公用标准的文档对象模型：基本对 象模型。 5.1.1 基本对象模型 基本对象模型提供了一个非常基础的文档对象层次结构（如图 5.2所示），并最先受到 NN2的脚本支持。在该模型中，window位于对象层次的最高级，包括全部的 document对 象，同时具有其他对象所没有的属性和方法，document就是浏览器载入的 HTML页面，其 上的链接和表单元素如按钮等交互性元素被作为有属性、方法和事件处理程序的元素对象来 对待。由于功能十分有限，JavaScript主要应用于简单的网页操作，如表单合法性验证、获 取程序最后一次修改的时间等等。 图 5.2 基本文档对象模型 IE3及其他更高版本的浏览器实现了来自 NN2的基本对象模型，因此，NN2后续的浏 览器版本的文档对象模型本质是相同的，只不过添加了其他的 window对象及其操作方法， 同时提供了引用原始对象的新方法，如 navigator和 screen对象等。 5.1.2 浏览器扩展 在各个版本浏览器中，文档对象模型都有其特殊的地方。一般来说，每发布一个新版本 的浏览器，浏览器厂商都会以各种方式扩展 document对象，新版本修订了老版本的程序错 误，同时添加了对象的属性、方法及事件处理程序等，不断扩充原有的功能。 当然，从新对象模型可以更快捷地执行更多任务的技术层面上来看，每次的浏览器版本 更新绝对不是一件坏事，但不同浏览器的对象模型朝着不同方向发展，却给Web程序员将 应用程序在不同浏览器之间移植方面带来了相当的难度，导致Web应用程序的跨平台性较 差。下面讨论文档对象模型发展过程中主要浏览器版本的对象模型，特别强调各种版本的文 档对象模型的新特性以及它们和常用编程任务之间的关系。 1．Netscape Navigator浏览器 基本对象模型最先在 NN2种获得支持，虽然功能很有限，这也为文档对象模型的发展 奠定了坚实的基础。在 NN3中通过访问嵌入对象、Applet应用程序、插件等，使第一个简 单、类似于 DHTML的应用程序的出现成为可能，且脚本语言能访问更多的文档属性和方法。 表 5.2中列出了 NN3中的 document对象新增的主要内容： 表 5.2 NN3 中document对象新增主要内容 属性 附加说明 applets[] 文本中的applets数组，用和标记 embeds[] 文本中嵌入对象的数组 images[] 文本中图像的数组，用和标记 plugins[] 浏览器中的插件数组 domain 包含web服务器主机名的字符串，仅能改变为更一般的主机名 NN3中的文档对象模型如图 5.3所示，其中灰色框内为NN3中 document对象新增内容。 图 5.3 NN3中 document对象新增内容 NN3中增加的最重要对象就是 images对象，可通过 document.images得到文档的一个 image数组，然后通过一下语句进行操作： document.images[n].src=… images对象的大多数属性都是只读的，而 src可读可写，典型应用是图片翻转程序，如 下代码所示： //源程序 5.2 在 NN4之前，Web应用程序基本不具有动态性，在 NN4中，新增标记支持，改 进了 Netscape事件模型、style对象及其操作方法，表 5.3中列出了 NN3中的 Document对 象新增的主要内容： 表 5.3 NN4 中document对象新增主要内容 属性 附加说明 classes 针对HTML标记，创建或使用带有class属性集的CSS样式 Ids 针对HTML标记，创建或使用带有id属性集的CSS样式 tags 针对任意的HTML标记，创建或使用CSS样式 layers[] 文本中的层数组，标记或

定位元素对象 NN4中的文档对象模型如图 5.4所示，其中灰色框内为NN4中 document对象新增内容。 图 5.4 NN4中 document对象新增内容 新增对象 layer(层)是一个容器，可以容纳自己的文档，从而拥有自己的 document对象。 当然，这个文档从属于主文档。JavaScript通过操作它的属性和方法，可以动态改变 layer 的尺寸、位置、隐藏与否等。如果有多个层，还可以更改其堆栈顺序，并且首次允许层覆盖 文档中的其它元素。假如需要访问 layer标记为“MyLayer”的层中标记为“MyPicture”的 image对象的 src属性，可通过如下方式访问： document.MyLayer.document.MyPicture.src 但是在W3C DOM中，layer对象没被吸收为标准对象，而是用定位 div对象和 span对 象代替，同时赋予了新的属性、方法和事件处理程序。在 NN4中，document.layers[]返回文 档的 layers[]数组，而在其它浏览器中，则返回 undefined，这也提供了一个鉴别 NN4浏览器 的有效方法。 tags[]属性可以在全局范围内操作某个 HTML元素对象的样式，语法如下： document.tags.tagName.propertyName 其中，tagName指 HTML元素对象，propertyName指要访问的 CSS属性。例如：

会员管理系统

如果要改变

之间文本对象的颜色或其它属性，可以通过以下简单的方法： document.tags.h1.color="red" NN6是 Netscape浏览器发展的里程碑，它向前兼容 DOM Level 0，也即W3C的 DOM 标准，并合并了早期文档对象模型中被广泛使用的特性。同时，它也部分遵循 DOM Level 1 和 DOM Level 2标准，主要包括W3C对于 HTML、XML、CSS和事件的对象模型。同时它 放弃了 NN4支持但差不多是其特有的扩展内容，如标记以及对应的 JavaScript对象， 打破了 windows程序“向下兼容”的规律，导致很多老版本浏览器上支持的脚本在 NN6中 无效。 2．Internet Explorer浏览器 IE3是 IE家族较早支持文档对象模型的浏览器，其对象模型基于 5.1.1节的基本对象模 型，但是扩展了几个属性，如 frame[]数组等。IE3中对象模型如图 5.5所示。 图 5.5 IE3对象模型结构 IE4时代，JavaScript脚本被广泛地运用于Web应用程序来实现网页的动态，同时它将 每个 HTML元素都表示为对象。IE4支持 NN2和 IE3的文档对象模型，同时具有许多新的、 和 NN4完全不一样的 document对象特性，在此，Netscape Navigator和 IE这两种使用最为 广泛的浏览器开始分道扬镳。表 5.4列出了 IE4中的新文本属性。 表 5.4 IE4 中的新文本属性 属性 附加说明 all[] 文档中所有HTML标记的数组 children[] 对象所有子标记数组 embeds[] 文档中嵌入对象的数组，用标记 images[] 文档中图像对象数组，用标记 scripts[] 文档的脚本数组，用

red green blue

其中 document.body.style.backgroundColor语句表示访问当前 document对象固有子对象 body的样式子对象 style的 backgroundColor属性。 注意：如果创建一个多框架页面，则直到浏览器载入所有框架时，某个框架内的脚本才能与其它框架进 行通信。 5.4 对象的属性和方法 DOM将文档表示为一棵枝繁叶茂的家谱树，如果把文档元素想象成家谱树上的各个节 点的话，可以用同样的记号来描述文档结构模型，在这种意义上讲，将文档看成一棵“节点 树”更为准确。在充分认识这棵树之前，先来了解节点的概念。 5.4.1 何谓节点 所谓节点(node)，表示某个网络中的一个连接点，换句话说，网络是节点和连线的集合 在W3C DOM中，每个容器、独立的元素或文本块都被看着一个节点，节点是W3C DOM 的基本构建块。当一个容器包含另一个容器时，对应的节点之间有父子关系。同时该节点树 遵循 HTML的结构化本质，如元素包含、，前者又包含

Welcome to DOM World!

运行上述代码，结果如图 5.9所示，null指某个节点没有对应的属性。 图 5.9 节点数的遍历方法实例 注意：遍历浏览器载入 HTML文档形成的节点树时，可通过 document.documentElement属性来定位根节 点，即标记。 在准确定位节点树中的某个节点后，就可以使用对象的方法来操作这个节点，下面介绍 对象(节点)的操作方法。 5.4.3 对象方法 对象方法是脚本给该对象的命令，可以有返回值，也可没有，且不是每个对象都有方法 定义。DOM中定义了操作节点的一系列行之有效的方法，让Web应用程序开发者真正做到 随心所欲地操作 HTML文档中各个元素对象，先来了解 id属性和 class属性。 5.4.4 id 属性和 class 属性 在图 5.1所示的家谱树中，HTML文档载入时各元素对象都被标注成节点，同时根据浏 览器载入的顺序，自动分配一个序号，可用 document.all[ ]直接访问。考察如下的实例： //源程序 5.6

Test!

Welcome to DOM World!

• Newer

---

程序运行结果如图 5.10所示，可以看出浏览器按载入顺序为每个 HTML元素都分配了 一个序号来访问对应的元素节点。 图 5.10 HTML载入生成的 document.all[]数组 注意：如果使用 document.all.length对循环进行检查，程序会出现死循环，因为每次输出正在检查的元素 时，document.all[]元素个数都在增加。 由于不能直观看出 document.all[]数组中各元素的序号分布，甚至在文档最终完成之前 根本无法获知节点树的架构，这种访问方法显然不能很方便、快捷地进行元素节点访问，现 在引入 id属性和 class属性。 id属性的用途是给 HTML文档中的某个特定的元素对象加上独一无二（对当前文档而 言）的标识符，便于精确访问这个元素对象。例如：

Hello World!

在 CSS中，可以为有着特定 id的元素对象定义一种独享的样式： #p1{ border:1px solid white; background-color:#333; color:#ccc; padding:1em; } 每个元素对象只能有一个 id属性值，不同的元素对象必须有不同的 id属性值。也可利 用 id属性为包含在某给定元素里的其他元素定义样式，这样定义的样式将只作用于包含在 给定元素里的指定元素。在前述的“购物清单”代码中，可通过如下方式定义

和

之 间文本的样式： #purchases li{ fontweight:bold; } id属性就是一座桥梁，连接着文档中的某个元素和 CSS样式表中的特定样式，同时实 现元素对象的相关操作。 所有的元素都有 class属性，不同的元素可以有相同的 class属性值，例如：

The First Line

The Second Line

可以通过如下方式定义

和

的共享样式： .special{ text-transform:uppercase; } 同时，也可以通过 h1.special方式定位第二个文本对象并改变它的样式，获取更为精确 的控制。 5.4.5 getElementById( )方法 该方法返回与指定 id属性值的元素节点相对应的对象，对应着文档里一个特定的元素 节点（元素对象）。该方法是与 document对象相关联的函数，其语法如下： document.getElementById(id) 其中 id为要定位的对象 id属性值。 下面的例子演示 getElementById( )方法的使用，同时可以看出其返回一个对象(object)， 而不是数值、字符串等。 //源程序 5.7

• Beans
• Cheese
• Milk

一般来说，我们不必为 HTML文档中的每一个元素对象都定义一个独一无二的 id属性 值，也可通过下面的 getElementByTagName( )方法准确定位文档中特定的元素。 注意： 1、JavaScript对大小写敏感， getElementById写成 GetElementById 、getelementById等都不对。 2、typeof返回数据的类型，如数值、对象、字符串等。 5.4.6 getElementByTagName( )方法 该方法返回文档里指定标签 tag的元素对象数组，与上述的 getElementById( )方法返回 对象不同，且返回的对象数组中每个元素分别对应文档里一个特定的元素节点（元素对象）。 其语法如下： element. getElementByTagName(tag) 其中 tag为指定的标签。下面给出的例子演示该方法返回的是对象数组，而不是对象。 var items=document.getElementByTagName("li"); for(var i=0;i之间的语句，可以看