第11章JavaScript.pptVIP

JavaScript 学习指南 Chapter11：DOM或以树形展示的Web页面 内容 文档对象模型－DOM DOM (Document Object Model)文档对象模型,如何把HTML或XML文档解析成内存结构树的规范 定义了标准的html元素，以及一些标准的方法用来访问和修改html文档里面的内容 11.1 DOM HTML 对象及其属性 属性： id：元素标识符 title：元素内容的描述性标题 lang：元素及其内容的语言 dir：文字方向（从左到右，从右到左） className:等价于class属性 11.1 DOM HTML 对象及其属性 11.1 DOM HTML 对象及其属性 DOM 集合 访问图像 使用数组索引值访问：item方法 var img = document.images.item(0); 通过指定名字或标识符访问：namedItem方法 var img = dItem(“original”); document.getElementById方法 获得页面上的图像数 var numImages = document.images.length; DOM 集合 11.2 DOM 树 子节点、父节点、兄弟节点 节点属性和方法 节点属性：P225 访问子节点和父节点 childNodes ： 子节点列表 firstChild ： 第一个子节点 lastChild ： 最后一个子节点 parentNode: 当前节点的父节点 节点属性和方法 访问兄弟节点 previousSibling ： 上一个兄弟节点 nextSibling ： 下一个兄弟节点 节点属性和方法 nodeType属性 ： 返回整数，代表这个节点的类型。 常用的几种类型： nodeType == 1 ： 元素节点 nodeType == 2 ： 属性节点 nodeType == 3 ： 文本节点 nodeType == 8 ： 注释节点 节点属性和方法（示例11.5） DOM 核心文档对象(示例11.6、11.7) document.getElementById方法 document.getElementsByTagName方法:返回节点列表 页面中所有指定标签的页面元素 11.3 元素及其上下文内访问 Element元素：获取和设置属性值 getAttribute(name) setAttribute(name,value) removeAttribute(name) getAttributeNode(name) removeAttributeNode(name) hasAttribute(name) 11.3 元素及其上下文内访问 11.4 修改文档树 创建节点 createElement方法：创建新元素 11.4 修改文档树 createTextNode方法：创建新的文本节点 11.4 修改文档树 createDocumentFragment方法：创建一个文档片段，在文档片段中添加各种节点，最后一次性添加到HTML页面中 减少页面更新次数，提高页面展示的效率 11.4 修改文档树 删除和修改节点 insertBefore(newChild,rdfChild)：在指定节点前插入新节点 replaceChild(newChild,oldChild)：替换原有节点 removeChild(oldChild)：删除现有子节点 appendChild(newChild)：添加子节点 11.4 修改文档树(示例11.8) 小 结 本章主要讲述了DOM HTML 对象及其属性、DOM树、元素及其上下文内访问、修改文档树。 * DOM HTML 对象及其属性 DOM树 元素及其上下文内访问 修改文档树 script type=text/javascript window.onload=function() { var img = document.images[0]; var imgAttr = img.id + + img.alt + + img.className; alert(imgAttr); // modify img.src=osprey.jpg; img.width=800; img.height=498; img.alt=Alternative; img.align=left; img.title=Osprey; } /script /he