第8章 文档对象模型.pptVIP

* Web编程基础 Chapter8：文档对象模型 * 引入：一个简单文档 html head title新网页/title /head body h3示例/h3 p align=center 您好/p /body /html 文档结构模型 文档 根节点：html 节点：head 节点：body 节点：title 文本：“新网页” 节点：h3 节点：p 文本：“示例” 文本：“您好” DOM概述 访问节点 操作节点 处理表格 本节内容 文档对象模型－DOM DOM (Document Object Model)文档对象模型,如何把HTML或XML文档解析成内存结构树的规范 每个HTML元素都变成了对象；添加了document.all集合。 每个对象都有innerHTML、outerHTML、innerText、outerText等属性。 定义了标准的html元素，以及一些标准的方法用来访问和修改html文档里面的内容 8.1 DOM概述 节点的属性（P186） nodeName：包含节点的名称。nodeName属性值是一个字符串，具体取值与节点类型有关。 nodeValue：包含节点的值。文本节点的值包含文本内容；属性节点的值即属性值，文档节点与元素节点的值为null。 nodeType：包含节点的类型。nodeType属性值是一个整数。 parentNode：指向当前节点的父节点。如果当前节点是文档节点，则parentNode属性值为null。 childNodes：包含所有子节点的列表，其中各个节点按源顺序排列。 firstChild：指向子节点列表中的第一个节点。 lastChild：指向子节点列表中的最后一个节点。 节点的属性 previousSibling：指向当前节点的前一个兄弟节点。如果该节点就是第一个兄弟节点，则previousSibling属性值为null。 nextSibiling：指向当前节点的下一个兄弟节点。如果该节点就是最后一个兄弟节点，则nextSibiling属性值为null。 attributes：包含当前节点的属性列表。 ownerDocument：指向当前节点所属的HTML文档对象。 8.1 DOM概述 节点的方法(P187) appendChild：将子节点添加到当前节点的子节点列表的末尾。 cloneChild：得到当前节点的副本。 hasChildNodes：返回一个Boolean值，指示当前节点是否有子节点。 insertBefore：在另一个节点前插入新的子节点。 removeChild：移除一个子节点。 replaceChild：用新节点替换旧节点。 isSupported：检测节点是否支持一个特殊功能。 DOM HTML对象及其属性 元素属性 id：元素标识符 title：元素内容的描述性标题 lang：元素及其内容的语言 dir：文字方向（从左到右，从右到左） className:等价于class属性 8.2 访问节点 访问子节点和父节点 childNodes ： 子节点列表 firstChild ： 第一个子节点 lastChild ： 最后一个子节点 parentNode: 当前节点的父节点 head titleHTML Sample page/title /head body h1 HTML Sample page/h1 pHello,This is a sample page/p /body Var eleHTML = document.documentElement; Var nodeList = eleHTML.childNodes; Var eleHead,eleBody; eleHead = nodeList[0]; eleBody = nodeList[1]; eleHead = eleHTML.firstChild; eleBody = eleHTML.lastChild; Alert(eleHead.parentNode == eleHTML); //html元素 //head和body节点 //head元素 //body元素 //head元素 //body元素 //输出true 访问兄弟节点 previousSibling ： 上一个兄弟节点 nextSibling ： 下一个兄弟节点 head titleHTML Sample page/title /head body h1 HTML Sample page/h1 pHello,Thi