DOM文档对象模型介绍.ppt

第4章DOM文档对象模型介绍 DOM是DocumentObjectModule的缩写 即文档对象模型 DOM是表示文档 访问和操作文档元素的应用程序接口 API 所有支持JavaScript的web浏览器都支持DOM 本书中介绍的DOM实际上是指W3CDOM 即由WorldWideWeb委员会定义的标准文档对象模型 其包含了传统web浏览器所实现的DOM模型的所有特性 DOM支持对HTML及XML的操作 4 1基本概念 本节向读者介绍DOM的基本概念 包括DOM的体系结构 树形结构 节点及其组成部分 节点的类型以及节点之间的关系 4 1 1树形结构 在DOM中 HTML文档的层次结构被表示为一个树形结构 树的根节点是一个表示当前HTML文档的Document对象 树的每个子节点表示HTML文档中的不同内容 4 1 2节点的类型和组成 每个节点都由一个Node对象表示 Node对象提供了nodeType属性来表示节点的类型 DOM为不同类型的节点提供了相应的接口 当知道一个节点为某种类型时 则可以使用相应的接口所定义的属性和方法 4 1 3节点之间的关系 节点与节点之间通常有3种关系 父子关系 兄弟关系和祖孙关系 在图4 1中 节点是节点和节点的父节点 和节点是节点的子节点 而和互为兄弟关系 同样 节点是和节点的父节点 和节点是节点的子节点 和节点互为兄弟节点 一个节点的父节点以上级别的节点 称为这个节点的祖先节点 这个节点称为祖先节点的子孙节点 例如节点是节点的祖先节点 节点是节点的子孙节点 DOM为Node对象提供了一组属性来表达这些关系 使得程序可以非常方便的获得对节点的引用 关于这些属性的知识将在下一节中向读者介绍 4 2节点的引用 需要对一个节点做相应操作时 首先需要获得对这个节点的引用 DOM定义了大量的属性和方法可以使程序方便的获得对目标节点的引用 下面向读者一一介绍 4 2 1根据id属性引用节点 在HTML中 可以给节点添加一个id属性 从而通过document对象的getElementById方法来查找拥有指定id属性值的节点 4 2 2根据name属性引用节点 通过docment对象的getElementsByName方法可以取得文档中所有具有指定name属性的节点的集合 该方法返回的是一个数组 4 2 3根据标签名引用节点 Node对象提供了getElementsByTagName方法来查找所有标签名与给定参数一致的下属节点 该方法返回一个数组 在介绍document对象的links属性时 已经向读者介绍过一个改变文档中所有链接背景色的示例 4 2 4引用父节点 Node对象提供了parentNode属性来引用当前节点的父节点 在下面的示例中 程序给页面所有的li时间注册了click事件的处理程序 单击li元素 则在指定的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引用相邻的节点 Node对象的previousSibling和nextSibling属性保存了节点的上一个和下一个兄弟节点的引用 在下面的示例中 通过给li节点定义事件处理程序 使得当鼠标划过li节点时 li节点本身的背景色变为红色 其相邻两个li节点的背景色变为黄色 当鼠标划离li元素时 回复原样 4 3节点的操作 上一节向读者介绍了各种获得节点引用的方法 这一节向读者介绍针对节点的基本操作 DOM提供了丰富的方法来支持对节点的基本操作 即创建 添加 修改和删除节点 本节将会辅以实例向读者详细介绍 4 3 1创建元素节点 当需要创建一个元素节点时 可以使用document对象的createElement方法 该方法接受一个标识需要创建的元素的标签名的字符串参数 返回对被创建的节点的引用 4 3 2创建文本节点 使用createTextNode方法可以创建一个文本节点 该方法接受一个字符串作为创建的文本节点的文本值 示例代码如下 document createTextNode Itisatextnode 4 3 3添加节点 Node对象提供了appendChild方法来将程序创建的节点 添加到父节点的直属子节点列表的末尾 该方法也可作用于已经存在于DOM树中的节点 执行方法后会改变节点在DOM树中的位置 而不是插入一个新的节点 4 3 4插入子节点 Node对象提供了insertBefore方法来将新节点插入到指定子节点的前面 其语法格式如下所示 parentNode insertBefore newNode childNode 4 3 5替换子节点 Node对象提供了replaceChild方法来使用一个新的节点替换一个子节点 其语法格式如下所示 parentNode replaceChild newNode childNode 4 3 6复制节点 Node对象提供了cloneNode方法来得到Node对象的一个副本 cloneNode方法接受一个布尔值参数 来标识返回的节点副本中是否包含原节点的子节点 当参数为true时 则包含子节点 当参数为false时 则不包含子节点 4 3 7删除子节点 Node对象提供了removeChild方法来删除一个直属子节点 该方法接受一个参数 为需要参数的子节点的引用 基本语法如下所示 parentNode removeChild childNode 4 3 8读取节点属性 使用Node对象的getAttribute方法可以得到节点的某一属性的值 该方法接受一个属性名作为参数 返回指定属性的值 例如有一a元素 RobinChen 4 3 9添加和修改属性节点 当需要添加或者修改一个属性节点时 可以使用Node对象的setAttribute方法 W3C并没有为这两部操作提供两部不同的方法 而是将这两项功能集中到了setAttribute这一个方法上 setAttribute方法的基本语法格式如下所示 node setAttribute attName attValue 4 3 10删除属性节点 当需要删除一个节点的某个属性时 可以使用removeAttribute方法 removeAttribute方法接受一个参数 表明了需要删除的属性的名称 其基本语法格式如下所示 node removeAttribute attName 4 4控制元素的样式 上一节向读者介绍了常见的针对节点的基本操作 DOM也提供了接口来支持针对元素节点CSS样式的操作 通过设置元素的class属性和操作元素的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中最重要的组成部分 事件驱动是现代面向对象编程的基本方法 完善的事件机制使JavaScript程序可以根据特定的事件来触发不同执行方法 使得程序可以更具有交互性和智能化 在本书之前的许多示例中 读者已经见过事件的使用 本节将向读者详细介绍DOM的事件模型 4 5 1事件模型和传播机制 目前主流浏览器所使用的事件模型主要为标准事件模型和IE事件模型 IE事件模型由IE浏览器使用 而标准事件模型由W3C制订 由Netscape等浏览器实现 4 5 2注册事件处理程序 注册一个事件处理程序有三种方法 第一种方法是作为节点的属性直接将时间处理程序写在属性值中 在之前的很多示例中 读者已经见过了这种方法 Document getaelementById btnclck onclick function setSize 11 4 5 3注销事件处理程序 当不再需要一个事件处理程序时 可以将其注销 使用节点属性或者对象属性注册的事件处理程序 可以通过将对象的相应属性设置为null来注销该事件处理程序 使用attachEvent或addEventListener注册的事件处理程序 可以使用对应的detachEvent或removeEventListener来注销 4 5 4事件对象 在前面介绍事件模型时 已经向读者简单介绍过事件对象的作用 就是在事件发生时生成事件对象 保存到window对象的event属性中 IE事件模型 或者当作第一个参数传递给事件处理程序 标准事件模型 事件对象保存了事件的相关信息 例如事件的类型 发生事件的目标元素等等 见136页表4 2 4 5 5常用事件 在学习了事件处理函数的注册和注销 已经事件对象的使用后 读者一定很想知道有哪些事件可以使用 见139页表4 3 4 6应用实例 本节综合本章中向读者介绍的有关DOM的知识 来编写两个常见的JavaScript应用 一个是悬浮的广告 另外一个是可拖动的层 建议读者自己将代码输入到编辑器中 并保存为HTML页面 然后到浏览器中查看效果 以加深记忆和理解 对于示例中出现的一些本章中未说明的内容 可以查阅本书附录中的DOM速查手册来了解其用法 4 6 1悬浮的广告 读者朋友们在很多网站上都可以看见这样的广告 广告的图片或文字始终停留在页面的某个位置 如论如何拖动滚动条 广告都会跟随屏幕的滚动而滚动 下面是一个实现该效果的实例 读者可以将代码保存成页面 并用浏览器访问来查看其效果 4 6 2可拖动的层 用过Google个性化首页或者QQ空间装扮功能的读者 一定会对其能够自由拖动各个内容层的操作印象深刻 下面的实例就是简单实现层的拖拽这一功能 4 7小结 本章向读者介绍了DOM 文档对象模型 的相关知识 首先介绍了DOM的层次结构 是一个以document对象为根节点的树形结构 DOM节点的类型和组成 以及节点之间的关系 然后向读者介绍了引用节点的各种方法 有直接通过id name或标签名引用的方法 也有通过节点之间的关系引用的间接引用方法 接着向读者介绍了针对节点的各种操作 包括创建节点 添加节点 删除节点 替换节点和对属性的操作 之后向读者介绍了如何通过DOM定义的接口来控制节点的样式 包括控制节点的class属性和操作style对象 接着向读者介绍了DOM的事件模型 其中包括标准事件模型和IE事件模型 讲解了如何注册和注销事件处理程序 分析了事件对象并罗列了常用的事件 最后 向读者展示了两个常见的应用实例 浮动广告和拖动层