DOM文档对象模型介绍

1、第4章 DOM文档对象模型介绍 DOM是Document Object Module的缩写，即文档对象模型。DOM是表示文档，访问和操作文档元素的应用程序接口（API），所有支持JavaScript的web浏览器都支持DOM。本书中介绍的DOM实际上是指W3C DOM，即由World Wide Web委员会定义的标准文档对象模型，其包含了传统web浏览器所实现的DOM模型的所有特性。DOM支持对HTML及XML的操作。4.1 基本概念 本节向读者介绍DOM的基本概念，包括DOM的体系结构（树形结构）、节点及其组成部分、节点的类型以及节点之间的关系。4.1.1 树形结构在DOM中，HTML文档的

2、层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的Document对象，树的每个子节点表示HTML文档中的不同内容。4.1.2 节点的类型和组成 每个节点都由一个Node对象表示，Node对象提供了nodeType属性来表示节点的类型。DOM为不同类型的节点提供了相应的接口，当知道一个节点为某种类型时，则可以使用相应的接口所定义的属性和方法。4.1.3 节点之间的关系节点与节点之间通常有3种关系：父子关系、兄弟关系和祖孙关系。在图4.1中，节点是节点和节点的父节点，和节点是节点的子节点，而和互为兄弟关系。同样，节点是和节点的父节点，和节点是节点的子节点，和节点互为兄弟节点。一

3、个节点的父节点以上级别的节点，称为这个节点的祖先节点，这个节点称为祖先节点的子孙节点。例如节点是节点的祖先节点，节点是节点的子孙节点。DOM为Node对象提供了一组属性来表达这些关系，使得程序可以非常方便的获得对节点的引用。关于这些属性的知识将在下一节中向读者介绍。4.2 节点的引用 需要对一个节点做相应操作时，首先需要获得对这个节点的引用。DOM定义了大量的属性和方法可以使程序方便的获得对目标节点的引用。下面向读者一一介绍。4.2.1 根据id属性引用节点 在HTML中，可以给节点添加一个id属性，从而通过document对象的getElementById方法来查找拥有指定id属性值的节点。

4、4.2.2 根据name属性引用节点 通过docment对象的getElementsByName方法可以取得文档中所有具有指定name属性的节点的集合，该方法返回的是一个数组。4.2.3 根据标签名引用节点 Node对象提供了getElementsByTagName方法来查找所有标签名与给定参数一致的下属节点，该方法返回一个数组。在介绍document对象的links属性时，已经向读者介绍过一个改变文档中所有链接背景色的示例。4.2.4 引用父节点 Node对象提供了parentNode属性来引用当前节点的父节点。在下面的示例中，程序给页面所有的li时间注册了click事件的处理程序，单击li

5、元素，则在指定的div中显示父节点的id。4.2.5 引用子节点 Node对象提供了3个属性来引用其直属子节点，分别是childNodes、firstChild和lastChild。childNodes属性来引用其所有的直属子节点。firstChild属性等于childNodes返回的元素集合中的第一个元素。lastChild属性等于childNodes返回的元素集合中的最后一个元素。在下面的示例中，首先获取文档中的ul元素，然后通过firstChild、lastChild和childNodes属性给第一个li节点和最后一个li节点以及剩下的其他节点设置3种不同的背景色。4.2.6 引用相邻的

6、节点 Node对象的previousSibling和nextSibling属性保存了节点的上一个和下一个兄弟节点的引用。在下面的示例中，通过给li节点定义事件处理程序，使得当鼠标划过li节点时，li节点本身的背景色变为红色，其相邻两个li节点的背景色变为黄色，当鼠标划离li元素时，回复原样。4.3 节点的操作 上一节向读者介绍了各种获得节点引用的方法，这一节向读者介绍针对节点的基本操作。DOM提供了丰富的方法来支持对节点的基本操作：即创建、添加、修改和删除节点。本节将会辅以实例向读者详细介绍。4.3.1 创建元素节点 当需要创建一个元素节点时，可以使用document对象的createElem

7、ent方法。该方法接受一个标识需要创建的元素的标签名的字符串参数，返回对被创建的节点的引用。4.3.2 创建文本节点 使用createTextNode方法可以创建一个文本节点，该方法接受一个字符串作为创建的文本节点的文本值。示例代码如下。 document.createTextNode(It is a text node);4.3.3 添加节点 Node对象提供了appendChild方法来将程序创建的节点，添加到父节点的直属子节点列表的末尾。该方法也可作用于已经存在于DOM树中的节点，执行方法后会改变节点在DOM树中的位置，而不是插入一个新的节点。4.3.4 插入子节点 Node对象提供了i

8、nsertBefore方法来将新节点插入到指定子节点的前面，其语法格式如下所示。 parentNode.insertBefore(newNode,childNode);4.3.5 替换子节点 Node对象提供了replaceChild方法来使用一个新的节点替换一个子节点，其语法格式如下所示。 parentNode.replaceChild(newNode,childNode);4.3.6 复制节点 Node对象提供了cloneNode方法来得到Node对象的一个副本。cloneNode方法接受一个布尔值参数，来标识返回的节点副本中是否包含原节点的子节点。当参数为true时，则包含子节点；当参数

9、为false时，则不包含子节点。4.3.7 删除子节点 Node对象提供了removeChild方法来删除一个直属子节点，该方法接受一个参数，为需要参数的子节点的引用。基本语法如下所示。 parentNode.removeChild(childNode);4.3.8 读取节点属性 使用Node对象的getAttribute方法可以得到节点的某一属性的值，该方法接受一个属性名作为参数，返回指定属性的值。例如有一a元素。 Robin Chen4.3.9 添加和修改属性节点 当需要添加或者修改一个属性节点时，可以使用Node对象的setAttribute方法。W3C并没有为这两部操作提供两部不同的方

10、法，而是将这两项功能集中到了setAttribute这一个方法上。setAttribute方法的基本语法格式如下所示。 node.setAttribute(attName,attValue);4.3.10 删除属性节点 当需要删除一个节点的某个属性时，可以使用removeAttribute方法。removeAttribute方法接受一个参数，表明了需要删除的属性的名称。其基本语法格式如下所示。 node.removeAttribute(attName);4.4 控制元素的样式 上一节向读者介绍了常见的针对节点的基本操作。DOM也提供了接口来支持针对元素节点CSS样式的操作。通过设置元素的cla

11、ss属性和操作元素的style属性，可以达到控制元素CSS样式的目的。本节将向读者介绍相关的知识。4.4.1 获取和设置元素的CSS类 通过设置元素的class属性，可以为元素指定一个css类来设置元素的样式。4.4.2 获取和设置元素样式 DOM为Node对象定义了style属性，以此作为对CSS样式操作的接口。元素的style属性是一个对象，保存了元素的CSS样式信息。例如node.style.backgroundColor保存了背景色的信息，node.style.color保存了文字颜色的信息。4.5 事件处理 事件处理是DOM中最重要的组成部分。事件驱动是现代面向对象编程的基本方法，完

12、善的事件机制使JavaScript程序可以根据特定的事件来触发不同执行方法，使得程序可以更具有交互性和智能化。在本书之前的许多示例中，读者已经见过事件的使用。本节将向读者详细介绍DOM的事件模型。4.5.1 事件模型和传播机制 目前主流浏览器所使用的事件模型主要为标准事件模型和IE事件模型。IE事件模型由IE浏览器使用，而标准事件模型由W3C制订，由Netscape等浏览器实现。4.5.2 注册事件处理程序 注册一个事件处理程序有三种方法。第一种方法是作为节点的属性直接将时间处理程序写在属性值中。在之前的很多示例中，读者已经见过了这种方法。 Document.getaelementById(b

13、tnclck).onclick=function() setSize(11); 4.5.3 注销事件处理程序 当不再需要一个事件处理程序时，可以将其注销。使用节点属性或者对象属性注册的事件处理程序，可以通过将对象的相应属性设置为null来注销该事件处理程序。使用attachEvent或addEventListener注册的事件处理程序，可以使用对应的detachEvent或removeEventListener来注销。4.5.4 事件对象 在前面介绍事件模型时，已经向读者简单介绍过事件对象的作用，就是在事件发生时生成事件对象，保存到window对象的event属性中（IE事件模型），或者当作第

14、一个参数传递给事件处理程序（标准事件模型）。事件对象保存了事件的相关信息，例如事件的类型、发生事件的目标元素等等。 见136页 表4-24.5.5 常用事件 在学习了事件处理函数的注册和注销，已经事件对象的使用后，读者一定很想知道有哪些事件可以使用。 见139页表4-34.6 应用实例 本节综合本章中向读者介绍的有关DOM的知识，来编写两个常见的JavaScript应用。一个是悬浮的广告，另外一个是可拖动的层。建议读者自己将代码输入到编辑器中，并保存为HTML页面，然后到浏览器中查看效果，以加深记忆和理解。对于示例中出现的一些本章中未说明的内容，可以查阅本书附录中的DOM速查手册来了解其用法。

15、4.6.1 悬浮的广告 读者朋友们在很多网站上都可以看见这样的广告：广告的图片或文字始终停留在页面的某个位置，如论如何拖动滚动条，广告都会跟随屏幕的滚动而滚动。下面是一个实现该效果的实例，读者可以将代码保存成页面，并用浏览器访问来查看其效果。4.6.2 可拖动的层 用过Google个性化首页或者QQ空间装扮功能的读者，一定会对其能够自由拖动各个内容层的操作印象深刻，下面的实例就是简单实现层的拖拽这一功能。4.7 小结本章向读者介绍了DOM（文档对象模型）的相关知识。首先介绍了DOM的层次结构，是一个以document对象为根节点的树形结构，DOM节点的类型和组成，以及节点之间的关系。然后向读者介绍了引用节点的各种方法，有直接通