第5讲++文档对象模型(DOM).pdfVIP

第 5 章 文档对象模型(DOM) 文档对象模型（Document Object Model ：DOM ），最初是W3C 为了解决浏览器混战时 代不同浏览器环境之间的差别而制定的模型标准，主要是针对IE 和Netscape Navigator 。W3C 解释为：“文档对象模型（DOM ）是一个能够让程序和脚本动态访问和更新文档内容、结构 和样式的语言平台，提供了标准的HTML 和XML 对象集，并有一个标准的接口来访问并操 作它们。”它使得程序员可以很快捷地访问HTML 或XML 页面上的标准组件，如元素、样 式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端Web 应用程序都必须使用 Java Applet 或ActiveX 等复杂的组件，现在基于DOM 规范，在支持DOM 的浏览器环境中， Web 开发人员可以很快捷、安全地创建多样化、功能强大的Web 应用程序。本章只讨论HTML DOM 。 5.1 DOM 概述 文档对象模型定义了JavaScript 可以进行操作的浏览器，描述了文档对象的逻辑结构及 各功能部件的标准接口。主要包括如下方面： 核心JavaScript 语言参考（数据类型、运算符、基本语句、函数等） 与数据类型相关的核心对象（String、Array 、Math 、Date 等数据类型） 浏览器对象（window 、location、history 、navigator 等） 文档对象（document、images、form 等） JavaScript 使用两种主要的对象模型：浏览器对象模型（BOM ）和文档对象模型（DOM ）， 前者提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法；后者则 提供了访问浏览器窗口内容，如文档、图片等各种HTML 元素以及这些元素包含的文本的 操作方法。在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。 观察下面的简单HTML 代码： //源程序 5.1 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0//EN /TR/REC-html140/strict.dtd html head meta http-equiv=content-type content=text/html; charset=gb2312 title First Page!/title /head body h1Test!/h1 !--NOTE!-- pWelcome toem DOM /emWorld! /p ul liNewer/li /ul /body /html 在DOM 模型中，浏览器载入这个HTML 文档时，它以树的形式对这个文档进行描述， 其中各HTML 的每个标记都作为一个对象进行相关操作，如图5.1 所示。 图5.1 实例的家谱树 可以看出，html 为根元素对象，可代表整个文档，head 和body 两个分支，位于于同一 层次，为兄弟关系，存在同一父元素对象，但又有各自的子元素对象。 在支持脚本的浏览器发展过程中，出现了如下6 种不同的文档对象模型，如表5.1 所示： 表 5.1 文档对象模型的各个版本及浏览器支持 文档对象模型 浏览器支持 NN2 ，NN3 ，IE3/J1 ，IE3/J2 ，NN4 ，IE4 ，IE5 ，NN6 ，IE5.5 ， Basic Object Model （基本对象模型） IE6 ，Moz1 ，Safari1 NN3 ，IE3.01 （Only for Mac ），NN4 ，IE4 ，IE5 ，NN6 ，IE5.5 ， Basic Plus Images （基本附加图像） IE6 ，Moz1 ，Safari1 NN4 Extensions （