JavaScript程序设计实例教程课件作者刘万辉教学课件第10章节DOM高级编程.ppt

尚辅网 / JavaScript课程开发组制作 第10章 DOM高级编程 本章要点 第10章 DOM高级编程 DOM对象意义 DOM对象节点类型 DOM对象节点及属性的访问 DOM对象节点的创建与修改 DOM节点对象的事件处理 实例：表单验证 10.1 DOM对象意义  DOM是文档对象模型（Document　Object　Model）的缩写。DOM对象模型的出现，使得HTML元素成为对象，借助JavaScript脚本就能操作HTML元素。HTML元素允许相互嵌套，页面文档部分是由body为根节点的HTML节点树组成的，DOM的结构就是一个树形结构（如图7-4）。在JavaScript程序使用DOM对象中可以动态添加、删除、查询节点，设置节点的属性，程序员使用丰富的DOM对象库可以方便地操控HTML元素。 10.2 DOM对象节点类型  一个文档是有任意多个节点的分层组成的。下面是一个合法DOM文档，提供了一个无序列表，文档中包含了最常用的节点类型,它们是元素节点、属性节点和文本节点。 body ul id=nav lia href=javascript:alert(建设目标);建设目标/a/li lia href=javascript:alert(建设思路);建设思路/a/li lia href=javascript:alert(培养方案);培养方案/a/li /ul /body 10.2 DOM对象节点类型  element:body element:ul element:li element:li element:li element:a element:a element:a text:建设目标 text:建设思路 text:培养方案 DOM文档树结构图 10.2 DOM对象节点类型  10.2.1 元素（Element）节点 元素（Element）节点是构建DOM树形结构的基础，可以作为非终端节点，可以有自己的属性节点、下级元素节点和下级文本节点，下级元素节点实现了DOM树纵向扩展，同级元素节点实现了DOM树横向扩展。元素节点在没有如何子节点的情况下它就是终端节点。元素节点的节点类型号为1。 10.2 DOM对象节点类型  10.2.2 属性（Attitude）节点 属性（Attitude）节点是一个键值对，键是属性名，值是属性值，属性节点不能成为独立节点，它必须从属于元素节点，只来描述元素节点的属性，充实元素节点的内容，因此，可以说属性节点不是节点，在DOM的操作中使用的方法也与其它节点不同。属性节点的节点类型号为2。 10.2 DOM对象节点类型  10.2.3 文本（Text）节点 文本（Text）节点表示一段文本，只能作为独立的终端节点，没有子节点和属性节点。文本节点的节点类型号为3。 10.2.4 注释节点 注释节点是用来说明你用的XHTML或者HTML是什么版本，或用来添加注释文本的。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd !--　注释文本　--表示一段注释。 以上两个例子有个共同的特点就是都带有感叹号“!”。注释节点的节点类型号为8。 10.2 DOM对象节点类型  10.2.5 文档节点 文档节点是HTML文档的父节点，也是整个DOM文档唯一的根节点，它是浏览器的内内置对象document。 它是HTML文档的父节点，也是整个DOM文档的根节点 文档节点 9 用来说明你用的XHTML或者HTML是什么版本 注释节点 8 可以成为独立的终端节点，没有子节点、没有属性节点 文本节点 3 不能成为独立节点，必须以元素节点成为父节点 属性节点 2 可以作为非终端节点，可以有自己的属性节点 元素节点 1 节点用途 节点含义 节点类型号 10.2 DOM对象节点类型  10.2.5 文档节点 项目演示 【示例10-1 】 说明： 页面中元素节点的名称为：html、head、title、style、body、ul、li、a、span、div。如果有脚本，不管script在何处定义属于body的元素子节点。本页面中body的直接子节点有：ul、span、#comment、#text、div和script。 顶层document节点有#comment和HTML。那么h