DOM文档对象模型总体介绍

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

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

3、3种关系：父子关系、兄弟关系和祖 孙关系。在图4.1中，节点是节点和节点 的父节点，和节点是节点的子 节点，而和互为兄弟关系。同样，节 点是和节点的父节点，和节点是节 点的子节点，和节点互为兄弟节点。一个节点的父 节点以上级别的节点，称为这个节点的祖先节点，这个节 点称为祖先节点的子孙节点。例如节点是节点的 祖先节点，节点是节点的子孙节点。DOM为Node 对象提供了一组属性来表达这些关系，使得程序可以非常 方便的获得对节点的引用。关于这些属性的知识将在下一 节中向读者介绍。 DOM文档对象模型总体介绍 4.2 节点的引用 需要对一个节点做相应操作时，首先需要获得对 这个节点的引用。DOM定义

4、了大量的属性和方法可 以使程序方便的获得对目标节点的引用。下面向 读者一一介绍。 DOM文档对象模型总体介绍 4.2.1 根据id属性引用节点 在HTML中，可以给节点添加一个id属性，从而通 过document对象的getElementById方法来查找拥 有指定id属性值的节点。 DOM文档对象模型总体介绍 4.2.2 根据name属性引用节点 通过docment对象的getElementsByName方法可以 取得文档中所有具有指定name属性的节点的集合， 该方法返回的是一个数组。 DOM文档对象模型总体介绍 4.2.3 根据标签名引用节点 Node对象提供了getElementsBy

5、TagName方法来查 找所有标签名与给定参数一致的下属节点，该方 法返回一个数组。在介绍document对象的links属 性时，已经向读者介绍过一个改变文档中所有链 接背景色的示例。 DOM文档对象模型总体介绍 4.2.4 引用父节点 Node对象提供了parentNode属性来引用当前节点 的父节点。在下面的示例中，程序给页面所有的 li时间注册了click事件的处理程序，单击li元素， 则在指定的div中显示父节点的id。 DOM文档对象模型总体介绍 4.2.5 引用子节点 Node对象提供了3个属性来引用其直属子节点，分 别是childNodes、firstChild和lastChi

6、ld。 childNodes属性来引用其所有的直属子节点。 firstChild属性等于childNodes返回的元素集合 中的第一个元素。lastChild属性等于childNodes 返回的元素集合中的最后一个元素。在下面的示 例中，首先获取文档中的ul元素，然后通过 firstChild、lastChild和childNodes属性给第一 个li节点和最后一个li节点以及剩下的其他节点 设置3种不同的背景色。 DOM文档对象模型总体介绍 4.2.6 引用相邻的节点 Node对象的previousSibling和nextSibling属性 保存了节点的上一个和下一个兄弟节点的引用。 在下面

7、的示例中，通过给li节点定义事件处理程 序，使得当鼠标划过li节点时，li节点本身的背 景色变为红色，其相邻两个li节点的背景色变为 黄色，当鼠标划离li元素时，回复原样。 DOM文档对象模型总体介绍 4.3 节点的操作 上一节向读者介绍了各种获得节点引用的方法， 这一节向读者介绍针对节点的基本操作。DOM提供 了丰富的方法来支持对节点的基本操作：即创建、 添加、修改和删除节点。本节将会辅以实例向读 者详细介绍。 DOM文档对象模型总体介绍 4.3.1 创建元素节点 当需要创建一个元素节点时，可以使用document 对象的createElement方法。该方法接受一个标识 需要创建的元素的标

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

9、型总体介绍 4.3.4 插入子节点 Node对象提供了insertBefore方法来将新节点插 入到指定子节点的前面，其语法格式如下所示。 parentNode.insertBefore(newNode,childNode); DOM文档对象模型总体介绍 4.3.5 替换子节点 Node对象提供了replaceChild方法来使用一个新 的节点替换一个子节点，其语法格式如下所示。 parentNode.replaceChild(newNode,childNode); DOM文档对象模型总体介绍 4.3.6 复制节点 Node对象提供了cloneNode方法来得到Node对象的 一个副本。clo

10、neNode方法接受一个布尔值参数， 来标识返回的节点副本中是否包含原节点的子节 点。当参数为true时，则包含子节点；当参数为 false时，则不包含子节点。 DOM文档对象模型总体介绍 4.3.7 删除子节点 Node对象提供了removeChild方法来删除一个直属 子节点，该方法接受一个参数，为需要参数的子 节点的引用。基本语法如下所示。 parentNode.removeChild(childNode); DOM文档对象模型总体介绍 4.3.8 读取节点属性 使用Node对象的getAttribute方法可以得到节点 的某一属性的值，该方法接受一个属性名作为参 数，返回指定属性的值。

11、例如有一a元素。 Robin Chen DOM文档对象模型总体介绍 4.3.9 添加和修改属性节点 当需要添加或者修改一个属性节点时，可以使用 Node对象的setAttribute方法。W3C并没有为这两 部操作提供两部不同的方法，而是将这两项功能 集中到了setAttribute这一个方法上。 setAttribute方法的基本语法格式如下所示。 node.setAttribute(attName,attValue); DOM文档对象模型总体介绍 4.3.10 删除属性节点 当需要删除一个节点的某个属性时，可以使用 removeAttribute方法。removeAttribute方法接

12、受一个参数，表明了需要删除的属性的名称。其 基本语法格式如下所示。 node.removeAttribute(attName); DOM文档对象模型总体介绍 4.4 控制元素的样式 上一节向读者介绍了常见的针对节点的基本操作。 DOM也提供了接口来支持针对元素节点CSS样式的 操作。通过设置元素的class属性和操作元素的 style属性，可以达到控制元素CSS样式的目的。 本节将向读者介绍相关的知识。 DOM文档对象模型总体介绍 4.4.1 获取和设置元素的CSS类 通过设置元素的class属性，可以为元素指定一个 css类来设置元素的样式。 DOM文档对象模型总体介绍 4.4.2 获取和设

13、置元素样式 DOM为Node对象定义了style属性，以此作为对CSS 样式操作的接口。元素的style属性是一个对象， 保存了元素的CSS样式信息。例如 node.style.backgroundColor保存了背景色的信 息，node.style.color保存了文字颜色的信息。 DOM文档对象模型总体介绍 4.5 事件处理 事件处理是DOM中最重要的组成部分。事件驱动是 现代面向对象编程的基本方法，完善的事件机制 使JavaScript程序可以根据特定的事件来触发不 同执行方法，使得程序可以更具有交互性和智能 化。在本书之前的许多示例中，读者已经见过事 件的使用。本节将向读者详细介绍DO

14、M的事件模型。 DOM文档对象模型总体介绍 4.5.1 事件模型和传播机制 目前主流浏览器所使用的事件模型主要为标准事 件模型和IE事件模型。IE事件模型由IE浏览器使 用，而标准事件模型由W3C制订，由Netscape等浏 览器实现。 DOM文档对象模型总体介绍 4.5.2 注册事件处理程序 注册一个事件处理程序有三种方法。第一种方法 是作为节点的属性直接将时间处理程序写在属性 值中。在之前的很多示例中，读者已经见过了这 种方法。 Document.getaelementById(btnclck).oncli ck=function() setSize(11); DOM文档对象模型总体介绍

15、4.5.3 注销事件处理程序 当不再需要一个事件处理程序时，可以将其注销。 使用节点属性或者对象属性注册的事件处理程序， 可以通过将对象的相应属性设置为null来注销该 事件处理程序。使用attachEvent或 addEventListener注册的事件处理程序，可以使 用对应的detachEvent或removeEventListener来 注销。 DOM文档对象模型总体介绍 4.5.4 事件对象 在前面介绍事件模型时，已经向读者简单介绍过 事件对象的作用，就是在事件发生时生成事件对 象，保存到window对象的event属性中（IE事件模 型），或者当作第一个参数传递给事件处理程序 （标

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