Javascript文档对象模型(DOM)

第5章文档对象模型(DOM)文档对象模型（DocumentObjectModel：DOM），昀初是W3C为了解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准，主要是针对IE和NetscapeNavigator。W3C解释为：“文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台，提供了标准的HTML和XML对象集，并有一个标准的接口来访问并操作它们。”它使得程序员可以很快捷地访问HTML或XML页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM标准推出之前，创建前端Web应用程序都必须使用JavaApplet或ActiveX等复杂的组件，现在基于DOM规范，在支持DOM的浏览器环境中，Web开发人员可以很快捷、安全地创建多样化、功能强大的Web应用程序。本章只讨论HTMLDOM。5.1DOM概述文档对象模型定义了JavaScript可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面：z核心JavaScript语言参考（数据类型、运算符、基本语句、函数等）z与数据类型相关的核心对象（String、Array、Math、Date等数据类型）z浏览器对象（window、location、history、navigator等）z文档对象（document、images、form等）JavaScript使用两种主要的对象模型：浏览器对象模型（BOM）和文档对象模型（DOM），前者提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法；后者则提供了访问浏览器窗口内容，如文档、图片等各种HTML元素以及这些元素包含的文本的操作方法。在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。观察下面的简单HTML代码：//源程序5.1!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0//EN=content-typecontent=text/html;charset=gb2312titleFirstPage!/title/headbodyh1Test!/h1!--NOTE!--pWelcometoemDOM/emWorld!/pulliNewer/li/ul/body/html在DOM模型中，浏览器载入这个HTML文档时，它以树的形式对这个文档进行描述，其中各HTML的每个标记都作为一个对象进行相关操作，如图5.1所示。图5.1实例的家谱树可以看出，html为根元素对象，可代表整个文档，head和body两个分支，位于于同一层次，为兄弟关系，存在同一父元素对象，但又有各自的子元素对象。在支持脚本的浏览器发展过程中，出现了如下6种不同的文档对象模型，如表5.1所示：表5.1文档对象模型的各个版本及浏览器支持文档对象模型浏览器支持BasicObjectModel（基本对象模型）NN2，NN3，IE3/J1，IE3/J2，NN4，IE4，IE5，NN6，IE5.5，IE6，Moz1，Safari1BasicPlusImages（基本附加图像）NN3，IE3.01（OnlyforMac），NN4，IE4，IE5，NN6，IE5.5，IE6，Moz1，Safari1NN4Extensions（NN4扩展）NN4IE4Extensions（IE4扩展）IE4，IE5，IE5.5，IE6(所有版本的一些功能需要Win32OS)IE5Extensions（IE5扩展）IE5，IE5.5，IE6(所有版本的一些功能需要Win32OS)W3CDOM（W3C文档对象模型I、II）IE5，NN6，IE5.5，Moz1，Safari1（均为部分）术语：IE4表示InternetExplorer4，NN4表示NetscapeNavigator4，Moz1表示Mozilla1，其余类推DOM不同版本的存在给客户端程序员带来了很多的挑战，编写当前浏览器中昀新对象模型支持的JavaScript脚本相对比较容易，但如果使用早期版本的浏览器访问这些网页，将会出现不支持某种属性或方法的情况。如果要使设计的网页能运行于绝大多数浏览器中，显而易见将是个难题。因此，W3CDOM对这些问题做了一些标准化工作，新的文档对象模型继承了许多原始的对象模型，同时还提供了文档对象引用的新方法。下面介绍在所有支持脚本的浏览器中均可实现的昀低公用标准的文档对象模型：基本对象模型。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．NetscapeNavigator浏览器基本对象模型昀先在NN2种获得支持，虽然功能很有限，这也为文档对象模型的发展奠定了坚实的基础。在NN3中通过访问嵌入对象、Applet应用程序、插件等，使第一个简单、类似于DHTML的应用程序的出现成为可能，且脚本语言能访问更多的文档属性和方法。表5.2中列出了NN3中的document对象新增的主要内容：表5.2NN3中document对象新增主要内容属性附加说明applets[]文本中的applets数组，用applet和/applet标记embeds[]文本中嵌入对象的数组images[]文本中图像的数组，用img和/img标记plugins[]浏览器中的插件数组domain包含web服务器主机名的字符串，仅能改变为更一般的主机名NN3中的文档对象模型如图5.3所示，其中灰色框内为NN3中document对象新增内容。图5.3NN3中document对象新增内容NN3中增加的昀重要对象就是images对象，可通过document.images得到文档的一个image数组，然后通过一下语句进行操作：document.images[n].src=…images对象的大多数属性都是只读的，而src可读可写，典型应用是图片翻转程序，如下代码所示：//源程序5.2!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.0//EN=#onmouseover=document.images[0].src='01.jpg'onmouseout=document.images[0].src='02.jpg'imgsrc=01.jpg/a/body/html在NN4之前，Web应用程序基本不具有动态性，在NN4中，新增layer标记支持，改进了Netscape事件模型、style对象及其操作方法，表5.3中列出了NN3中的Document对象新增的主要内容：表5.3NN4中document对象新增主要内容属性附加说明classes针对HTML标记，创建或使用带有class属性集的CSS样式Ids针对HTML标记，创建或使用带有id属性集的CSS样式tags针对任意的HTML标记，创建或使用CSS样式layers[]文本中的层数组，layer标记或div定位元素对象NN4中的文档对象模型如图5.4所示，其中灰色框内为NN4中document对象新增内容。图5.4NN4中document对象新增内容新增对象layer(层)是一个容器，可以容纳自己的文档，从而拥有自己的document对象。当然，这个文档从属于主文档。JavaScript通过操作它的属性和方法，可以动态改变layer的尺寸、位置、隐藏与否等。如果有多个层，还可以更改其堆栈顺序，并且首次允许层覆盖文档中的其它元素。假如需要访问layer标记为“MyLayer”的层中标记为“MyPicture”的image对象的src属性，可通过如下方式访问：document.MyLayer.document.MyPicture.src但是在W3CDOM中，layer对象没被吸收为标准对象，而是用定位div对象和span对象代替，同时赋予了新的属性、方法和事件处理程序。在NN4中，document.layers[]返回文档的layers[]数组，而在其它浏览器中，则返回undefined，这也提供了一个鉴别NN4浏览器的有效方法。tags[]属性可以在全局范围内操作某个HTML元素对象的样式，语法如下：document.tags.tagName.propertyName其中，tagName指HTML元素对象，propertyName指要访问的CSS属性。例如：h1class=site-nametitle会员管理系统/h1如果要改变h1/h1之间文本对象的颜色或其它属性，可以通过以下简单的方法：document.tags.h1.color=redNN6是Netscape浏览器发展的里程碑，它向前兼容DOMLevel0，也即W3C的DOM标准，并合并了早期文档对象模型中被广泛使用的特性。同时，它也部分遵循DOMLevel1和DOMLevel2标准，主要包括W3C对于HTML、XML、CSS和事件的对象模型。同时它放弃了NN4支持但差不多是其特有的扩展内容，如layer标记以及对应的JavaScript对象，打破了windows程序“向下兼容”的规律，导致很多老版本浏览器上支持的脚本在NN6中无效。2．InternetExplorer浏览器IE3是IE家族较早支持文档对象模型的浏览器，其对象模型基于5.1.1节的基本对象模型，但是扩展了几个属性，如frame[]数组等。IE3中对象模型如图5.5所示。图5.5IE3对象模型结构IE4时代，JavaScript脚本被广泛地运用于Web应用程序来实现网页的动态，同时它将每个HTML元素都表示为对象。IE4支持NN2和IE3的文档对象模型，同时具有许多新的、和NN4完全不一样的document对象特性，在此，NetscapeNavigator和IE这两种使用昀为广泛的浏览器开始分道扬镳。表5.4列出了IE4中的新文本属性。表5.4IE4中的新文本属性属性附加说明all[]文档中所有HTML标记的数组children[]对象所有子标记数组embeds[