ajax实用技术教学课件作者程继洪肖川李海斌编著第6章dom基础6.1-6.2.pptx

第2部分 DOM、事件处理及常用对象第6章 DOM基础本章导读 ◆ DOM树形结构。 ◆ DOM节点类型、常用属性和方法。 ◆ DOM节点的引用。 ◆ DOM节点的操作。在许多应用中可以动态的调整网页的内容，根据用户的不同操作，显示新的内容，删除原来的内容，修改已有的内容，而且还有各种动态效果。这是怎么实现的呢？或许这一问题已经勾起了你的兴趣，答案就是这一章中。Ajax通过异步请求从服务器请求了信息，并通过添加、修改和删除网页中的节点进行内容更新。在网页中显示的文本、链接、图片、动画等漂亮的元素在浏览器的解析器看来都是一个一个的节点，节点之间有父与子的关系，通过对这些节点的解析，就显示出漂亮了网页了。本章我们就来学习一下这些知识。6.1 DOM树结构DOM指的是文档对象模型，即Document Object Model。那么DOM到底是什么呢？W3C对DOM的定义如下：The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.[24]这句话的意思是说，W3C文档对象模型（DOM）是一种独立于平台和语言独立的接口，它允许程序和脚本动态的访问并修改文档的内容、结构和风格。那么DOM允许我们做什么呢？或者，换句话说通过DOM我们能做什么呢？通过DOM我们可以实现以下操作[24]。 ◆ 改变网页中的HTML元素。 ◆ 改变网页中HTML元素的属性。 ◆ 改变网页中CSS的样式风格。 ◆ 移除已有的HTML元素和属性。 ◆ 添加新的HTML元素和属性。 ◆ 对HTML事件予以响应。 ◆ 创建新的HTML事件。注意，DOM不但可以进行HTML操作，也可以进行XML DOM操作，还可以进行其他DOM结构的操作，这里只讲述了HTML DOM的操作，在XML解析章节再对XML DOM操作进行讲解。了解了DOM可以进行的操作以后，我们来看一下DOM是一种什么样的结构。我们先来看以下的HTML代码，如清单6-1所示。清单6-1 HTML网页html head titleMy title/title /head body a href=My link/a h1My header/h1 /body/html清单6-1所示的HTML网页对应的DOM树形结构如图6-1[24]所示。图6-1 DOM树形结构观察图6-1可以发现html下面有两个节点，一个是head，另一个是body，像这种关系的，我们称html为head和body的父节点，而head和body为html的子节点。在网页中这种父子关系表现为嵌套和被嵌套的关系，即父元素嵌套子元素。同理，head是title的父节点，title是“My title”的父节点；title为head的子节点，“My title”是title的子结点。body是a和h1的父节点，a和h1是body的子节点。“href”是a的子节点。其他节点的父子关系大家根据以上内容判断一下，看看自己掌握了没有。DOM中除了父子关系外，还有一个兄弟关系。所谓兄弟，就是有相同父节点的节点之间互称为“兄弟”。如head, body是兄弟节点，a和h1是兄弟节点，“href”和“My link”是兄弟节点，但是“My link”和“My header”不是兄弟节点，可称为“堂兄弟”。图6-1中head和“My title”是祖孙关系，因为head是title的父节点，title是“My title”的父节点，所以“My title”是head的孙子节点。这种孙子节点有时也称为“子节点”，为了与直接“父子”关系相区别，把直接“父子”关系的子节点称为“直接子节点”，父节点称为“直接父节点”。在不引起混淆的情况下，可以直接称为“父节点”“子节点”。但注意我们在DOM中进行的子节点操作，不包括这种“间接的子节点”！请大家仔细对照清单6-1和图6-1，把网页中的元素的关系和DOM中节点之间的关系，这非常重要！这是Ajax操作网页的基础，必须彻底掌握。6.2 DOM节点DOM中的每个节点以Node对象进行表示，每个节点有一个nodeType属性，用来标识节点的类型，并且提供了节点操作的属性和方法。下面我们分别介绍节点类型、节点属性和节点操作。6.2.1 节点类型与结构DOM中节点分为7种类型，分别是元素、属性、文本、注释、文档、文档类型和文档片段节点，如表6-1所示。其中用的比较多的是元素节点、属性节点和文本节点。其他类型的节