DOM文档对象模型介绍.pptVIP

第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文档的层次结构被表示为一个树形结构。树的根节点是一个表示当前HTML文档的Document对象，树的每个子节点表示HTML文档中的不同内容。 4.1.2 节点的类型和组成 每个节点都由一个Node对象表示，Node对象提供了nodeType属性来表示节点的类型。DOM为不同类型的节点提供了相应的接口，当知道一个节点为某种类型时，则可以使用相应的接口所定义的属性和方法。 4.1.3 节点之间的关系 节点与节点之间通常有3种关系：父子关系、兄弟关系和祖孙关系。在图4.1中，节点html是节点head和节点body的父节点，head和body节点是html节点的子节点，而head和body互为兄弟关系。同样，body节点是h1和p节点的父节点，h1和p节点是body节点的子节点，h1和p节点互为兄弟节点。一个节点的父节点以上级别的节点，称为这个节点的祖先节点，这个节点称为祖先节点的子孙节点。例如html节点是p节点的祖先节点，p节点是html节点的子孙节点。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方法可以创建一个文本节点，该方法接受一个字符串作为创建的文本节点的文本