基于任务驱动模式的JavaScript程序设计案例第4章 文档对象模型(DOM).ppt

第4章 文档对象模型(DOM) 4.1 概 述　　文档对象模型(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。　　 4.2 DOM概述　　文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面：　　● 核心JavaScript语言参考(数据类型、运算符、基本语句、函数等)；　　● 与数据类型相关的核心对象(String、Array、Math、Date等数据类型)；　　● 浏览器对象(window、location、history、navigator等)；　　● 文档对象(document、images、form等)。 　　JavaScript使用两种主要的对象模型：浏览器对象模型(BOM)和文档对象模型(DOM)，前者提供了访问浏览器的各个功能部件，如浏览器窗口本身、浏览历史等的操作方法；后者则提供了访问浏览器的窗口内容，如文档、图片等各种HTML元素以及这些元素包含的文本的操作方法。　　DOM不同版本的存在给客户端程序员带来了很多的挑战，编写当前浏览器中必威体育精装版对象模型支持的JavaScript脚本相对比较容易，但如果使用早期版本的浏览器访问这些网页，将会出现不支持某种属性或方法的情况。如果要使设计的网页能运行于绝大多数浏览器中，显而易见将是个难题。因此，W3C DOM对这些问题做了一些标准化工作，新的文档对象模型继承了许多原始的对象模型，同时还提供了文档对象引用的新方法。 4.2.1 IE中的DOM实现　　IE3是IE家族较早支持文档对象模型的浏览器，其对象模型基于最早的基本对象模型，但是扩展了几个属性，如frame[]数组等。IE中对象模型如图4-1所示。 　　IE4时代，JavaScript被广泛地运用于Web应用程序来实现网页的动态效果，同时它将每个HTML元素都表示为对象。在后续的IE版本中，扩展了许多新的document对象特性，比如all[]、images[]等数组属性，使得页面的操作更加灵活和方便。　　IE5文档对象模型与IE4极其相似，但对IE4进行了功能扩展，增加了对象的可用属性和方法，使得它更为强大，具有更强的文档操作能力。同时，IE5中的事件处理器数目也大大增加，达到40多种，从专门的鼠标和键盘事件到进行剪贴、复制的事件。 　　IE5.5、6、7在IE4文档对象模型的基础上，在实现W3C DOM规范的同时，继续添加只能在IE内核浏览器中运行的功能部件，包括新的属性、方法和事件处理程序。从IE6开始，文档对象模型完全符合了CSS1和DOM Level 1标准。　　较之其他浏览器，IE对W3C DOM标准贯彻得不是很完全，尚有许多有待完善的地方。 4.2.2 W3C DOM 　　客户端Web应用程序开发人员面对的最大障碍在于DOM有很多不同的版本，同时在浏览器版本更替过程中，对象模型又不是统一的，如果需要在不同浏览器环境中运行该网页，将会发现对象的很多属性或方法，甚至某些对象都不起作用。W3C文档对象模型(DOM)是一个中立的接口语言平台，为程序以及脚本动态地访问和更新文档内容，并为结构以及样式提供一个通用的标准。它将把整个页面(HTML或XML)规划成由节点分层构成的文档，页面的每个部分都是一个节点的衍生物，从而使开发者对文档的内容和结构具有控制力，用DOM API可以轻松地删除、添加和替换指定的节点。 　　DOM规范必须适应HTML的已知结构，同时适应XML文档的未知结构。DOM的概念主要有：　　核心DOM：指定类属类型，将带有标记的文档看成树状结构并据此对文档进行相关操作。　　DOM事件：包括使用者熟悉的鼠标、键盘事件，同时包括DOM特有的事件，当操作文档对象模型中的各元素对象时发生。　　HTML DOM：提供用于操作HTML文档以及类似于JavaScript对象模型语法的功能部件，在核心DOM的基础上支持对所有HT