网页特效技术理论部分javascript-t

1、第三章文档对象模型(DOM)本章案例遍历Dom显示相应Dom信息 向文档中插入新的节点 本章目标了解Dom的含义掌握Dom的操作方法掌握getElementById方法预习检查提问什么是DOM？定位指定元素的方法有哪些？什么是DOMDOM是一个表达XML文档的标准(由W3C制定的)。它未必是最快的方式，也未必是最轻量级的或者最容易使用的，但的确是应用最广泛的，大部分web开发的编程语言如Java、PHP、Python、Ruby和JavaScript等都提供了DOM的实现。DOM给开发者提供了一种定位XML层级结构的直观方法。主要包括：核心 JavaScript 语言参考（数据类型、运算符、基本

2、语句、函数等）与数据类型相关的核心对象（String、Array、Math、Date 等数据类型）浏览器对象（window、location、history、navigator 等）文档对象（document、images、form 等） DOM对象的属性和方法DOM-一棵枝繁叶茂的“节点树”所谓节点(node)，表示某个网络中的一个连接点，换句话说，网络是节点和连线的集合在，W3C DOM 中，每个容器、独立的元素或文本块都被看成一个节点，节点是DOM的基本构建块。 节点类型DOM 中定义了HTML 文档中6 种相关节点类型。 节点类型数值节点类型附加说明实例1 元素(Element)HTM

3、L标记元素2属性(Attribute)HTML标记元素的属性color=red3文本(Text)被HTML标记括起来的文本段Hello World!8注释(Comment)HTML注释段9文档(Document)HTML文档根文本对象10文档类型(DocumentType)文档类型DOM对象的属性属性一般定义对象的当前设置，反映对象的可见属性。节点属性附加说明nodeName返回当前节点名字nodeValue返回当前节点的值，仅对文本节点nodeType返回与节点类型相对应的值parentNode引用当前节点的父节点，如果存在的话childNodes访问当前节点的子节点集合，如果存在的话fir

4、stChild对标记的子节点集合中第一个节点的引用，如果存在的话lastChild对标记的子节点集合中最后一个节点的引用，如果存在的话previousSibling对同属一个父节点的前一个兄弟节点的引用nextSibling对同属一个父节点的下一个兄弟节点的引用attributes返回当前节点（标记）属性的列表ownerDocument指向包含节点（标记）的HTML document对象DOM对象的属性 e to DOM World! 以上代码可用下图表示遍历DOM演示程序示例1.html对象方法 对象方法是脚本给该对象的命令，可以有返回值，也可没有，且不是每个对象都有方法定义。DOM 中定义

5、了操作节点的一系列行之有效的方法，让Web 应用程序开发者真正做到随心所欲地操作HTML 文档中各个元素对象。 常用对象方法：getElementById()getElementsByTagName()getElementsByName()getAttribute()对象方法getElementById()方法 该方法返回与指定id 属性值的元素节点相对应的对象，对应着文档里一个特定的元素节点（元素对象）。该方法是与document 对象相关联的函数，其语法如下：document.getElementById(id) document.write(typeof /typeof document

6、.getElementById(purchases);演示程序示例2.html对象方法该方法返回文档里指定标签tag 的元素对象数组，与getElementById( )方法返回对象不同，且返回的对象数组中每个元素分别对应文档里一个特定的元素节点（元素对象）。 document. getElementsByTagName(tag)var items=document.getElementsByTagName(li);for(var i=0;iitems.length;i+) document.write(typeof itemi);对象方法getElementsByName()方法 旧版本的H

7、TML 文档更习惯于对、等元素节点使用name 属性。此时需要用到文档对象的getElementsByName( )方法来定位。该方法返回指定名称name 的节点序列。document. getElementsByName(name)var MyList=document.getElementsByName(MyTag);var temp= ;for(var i=0;iMyList.length;i+) temp+=nodeName: +node.nodeName+n;temp+=nodeType: +node.nodeType+n;temp+=nodeValue: +node.nodeVal

8、ue+n;return temp;演示程序示例3.html对象方法getAttribute()方法 该方法返回目标对象指定属性名称的某个属性值。语法如下：object.getAttribute(attribute) var objSample=document.getElementsByTagName(p);for(var i=0;iobjSample.length;i+) document.write(objSamplei.getAttribute(title);演示程序示例4.html 课堂练习遍历下面的html文档，输出所有的复选框的值。附加节点由于文本节点具有易于操纵、对象明确等特点，

9、DOM 提供了非常丰富的节点处理方法，如表所示：操作类型方法原型附加说明生成节点createElement(tagName)创建由tagName指定类型的标记CreateTextNode(string)创建包含字符创string的文本节点createAttribute(name)针对节点创建由name指定的属性，不常用 ment(string)创建由字符串string指定的文本注释插入和添加节点appendChild(newChild)添加子节点newChild到目标节点上insertBefore(newChild,targetChild)将新节点newChild插入目标节点targetChi

10、ld之前复制节点cloneNode(bool)复制节点自身，由逻辑量bool确定是否复制子节点最常用的两个节点操作方法附加节点删除和替换节点removeChild(childName)删除由childName指定的节点replaceChild(newChild,oldChild)用新节点newChild替换旧节点oldChild文本节点操作insertData(offset,string)从由offset指定的位置插入string值appendData(string)将string值插入到文本节点的末尾处deleteData(offset,count)从由offset指定的位置删除count个

11、字符replaceData(offset,count,string)从由offset指定的位置用string代替count个字符splitText(offset)从由offset指定的位置将文本节点分成两个文本节点，左边更新为原始节点，右边的返回到新节点substringData(offset,count)返回从offset指定的位置开始的count个字符最常用的移除节点的方法生成节点DOM 中提供的方法生成新节点的操作非常简单，语法分别如下：myElement=document.createElement(h1)myTextNode=document.createTextNode(My Te

12、xt Node!) ment(My Comment!) 如何将新生成的节点插入到页面中？ object.appendChild(newChild) 插入节点/产生p 元素节点和新文本节点var newParagraph = document.createElement(p);var newTextNode= document.createTextNode(document.MyForm.MyField.value);newParagraph.appendChild(newTextNode);创建新节点创建新文本节点将文本节点添加到P节点内部演示程序示例5.html删除节点可以在节点树中生成、添加、复制一个节点，当然也可以删除节点树中特定的节点。DOM 提供removeChild()方法来进行删除操作，语法如下：removeNode=object.removeChild(name) 删除节点var parentElement=document.getElementById(p1);/返回元素节点P 的最后一个孩子，即文本节点“World!”currentElement=par