第3章 文档对象模型（DOM）.pptVIP

第3章 文档对象模型（DOM） DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范，DOM是一种与浏览器框架语言无关的接口。从某种意义上来说，DOM可以看做是专门为了解决各种不同版本的JavaScript之间冲突而产生的。DOM为Web程序设计师和开发者提供一个标准的方法，让其可以方便的访问网站中的数据、脚本等信息。本章将介绍DOM的基础概念及访问DOM元素的方法，并介绍如何添加、修改以及删除一个页面上的DOM元素。 3.1 什么是DOM 从Netscape引入JavaScript开始，浏览器就已经包括了表示Web文档各部分和其他浏览器特性的对象。只是一直没有一个统一的标准对其进行规范。近年来，随着各种新型的浏览器以及各浏览器新版本的发布，会有更多的高级DOM得到支持。因此，DOM的被使用也变得越来越广泛。 在方法方面，传统的Document对象只支持open()、close()、clear()、write()与writeln()。DOM 1去掉了close()方法，并且除了write()以外，DOM提供了更灵活的创建对象的方法。例如： 使用createComment(data) 使用createElement(tagName) 使用createTextNode(data) 3.1 什么是DOM 另外，DOM还增加了3个方法，用于检索文档中的特定区域，将在本章后边内容中进行介绍。 document.getElementById(elementId)： document.getElementsByName(elementName)： document.getElementsByTagName(tagname)： 比较老的浏览器，如Internet Explorer 4等，只是支持它们自己的DOM，但都不是标准化的。不过，幸运的是，随着浏览器新版本的推出，常用的浏览器大都支持W3C的DOM。 3.2 DOM的结构和节点 简单地说，DOM可以看做是以层次结构组织的节点或者信息的组合。该层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构，然后才能做其他任何工作。也正是由于DOM是基于层次结构的，所以其通常被认为是基于树的。 3.2.1 DOM的树结构 从用户的角度来说只有一个标签为h1的标题和一个div内容标签，用DOM树对其进行描述如图3.1所示。 3.2.2 DOM中的节点 从上一小节已经知道，DOM会将HTML文件的节点建构成树状结构。从该结构中可以看出HTML文件本身的级别结构。DOM将会建立一个单一文件节点来表示整个HTML文件，并将其视为各阶级结构的根节点。每个节点还可以具有自己的属性和方法，使用者可以根据自己的需要对其进行存取、显示等操作。 1．元素节点 2．属性节点 3．文本节点 4．注释节点 3.3 访问DOM节点 所有的DOM元素无外乎包含以下三者之一：文本、元素、文本与元素的混合。一般来说，文本以及文本和元素的混合比较常见。本节将介绍JavaScript中访问DOM节点元素的方法。 3.3.1 按Id取元素：getElementById() DOM提供了一个名为getElementById()的方法。这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。需要注意的是，JavaScript语言是区分字母的大小写的。所以在使用“getElementById”方法的时候不能把函数名称的大小写写错了。 3.3.2 按标签名取元素集：getElementsByTagName() getElementsByTagName()方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById()，这个方法也是只有一个参数的函数，它的参数是HTML标签的名字。它与getElementById()方法有许多相似之处，但有一点需要特别注意：getElements- ByTagName()方法返回的是一个数组；在编写脚本时千万注意不要把这两个方法弄混了。 3.4 操作元素内的文本 获取元素内的文本是对DOM元素所做的最简单的操作之一，不过却是最基本的操作，因此也十分重要。举例来说，在3.2.1节DOM树结构的例子中，有一个body主元素，它包含一个h1元素，h1元素本身又同时包含文本块。 3.5 操作元素内的HTML 与获取元素内的文本比起来，在DOM中获取元素内的HTML则显得比较简单。因为所有的现代浏览器现在基本上都实现了HTML DOM元素的一个额外属性：innerHTML。使用这个属性就可以从一个元素中提取所有HTML和文本了。 3.6 修改DOM节点 迄今为止，已经