第6章 文档对象模型(DOM
- 格式:ppt
- 大小:229.50 KB
- 文档页数:19
任务6 DOM文档解析——客户端查询页面的动态排序【任务描述】在网上图书管理系统中,管理员或用户经常需要用到数据排序功能,即根据指定的字段将表格的记录按照升序或降序进行重新排列。
要实现该功能,该如何访问及操作XML文档中的数据?如何实现数据的动态排序?本次任务将针对图书管理系统,使用DOM技术和XSLT模板转换技术实现XML文档数据在客户端查询页面的动态排序。
当用户单击表格的标题栏时,可以实现按标题栏的字段对查询后的图书基本信息进行动态排序,其中排序的过程在客户端实现,不需要与服务器进行交互。
本次任务的知识目标为:①了解DOM及节点层次②掌握如何创建XMLDocument对象③掌握使用节点对象访问及操作XML文档④掌握根据节点文本内容查找节点本次任务的技能目标为:①会创建XMLDocument对象②会加载、遍历XML文档③会操作DOM对XML文档添加元素、删除元素、修改元素【知识准备】6.1 DOM概述DOM是文档对象模型(Document Object Model)的缩写,它是由W3C提出的标准化的编程接口。
W3C DOM被分为不同的部分(核心DOM、XML DOM、HTML DOM)以及不同的级别(DOM Level 1/2/3)。
(1) 核心DOM:定义了一套标准的用于任何结构化文档的对象。
(2) XML DOM:定义了一套标准的用于XML文档的对象。
(3) HTML DOM:定义了一套标准的用于HTML文档的对象。
DOM包含一组对象的集合,通过操纵这些对象,可以对文档进行读取、遍历、修改、添加以及删除等操作。
6.1.1 XML DOM简介XML DOM是专门针对XML的文档对象模型(Document Object Model)的W3C标准,它独立于平台和语言,能支持C#、Java Script、VB Script 等大多数编程语言。
XML DOM定义了一套标准,用于访问XML文档和处理XML文档的对象。
DOM⽂档对象模型简介DOM简介DOM是W3C(万维⽹联盟)的标准"W3C⽂档对象模型DOM是中⽴于平台和语⾔的接⼝,它允许程序和脚本动态地访问和更新⽂档的内容、结构、样式".W3C DOM标准分为3个不同部分HTML DOM 定义了所有HTML元素的对象和属性,以及访问它们的⽅法HTML DOM 节点DOM 节点 HTML⽂档中所有内容都是节点:整个⽂档是⼀个⽂档节点每个HTML元素是元素节点HTML元素内的⽂本是⽂本节点每个HTML属性是属性节点注释是注释节点HTML DOM Tree 节点树树中所有节点均可以通过JS访问,修改。
节点⽗、⼦、同胞节点树中节点间彼此拥有层级关系Parent,child,sibling警告!DOM处理中常见错误是希望元素节点包含⽂本<title>DOM学习</title> 元素节点是<title>,包含值"DOM学习"的⽂本节点可以通过innerHTML属性来访问⽂本节点的值HTML DOM ⽅法编程接⼝可以通过javascript(以及其他编程语⾔)对HTML DOM进⾏访问所有HTML元素被定义为对象,⽽编程接⼝则是对象⽅法和对象属性⽅法是可以执⾏的动作(添加/修改元素)属性是可以获取或者设置的值(节点名称/内容)HTML DOM对象-⽅法-属性getElementById(id)获取带有执⾏id的节点(元素)getElementsByTagName(tag)获取所有指定标签的节点,p标签等getElementsByClassName(class)获取所有指定类型的节点createElement(ele)创建新标签元素createTextNode(txt)创建⽂本节点insertBefore(newNode,node)在node节点之后插⼊newNodeappendChild(node)插⼊新节点(元素),作为⽗节点的最后⼀个⼦节点replaceNode(newNode,oldNode)替换旧元素removeChild(node)删除⼦节点(元素)innerHTML节点(元素)的⽂本值parentNode节点(元素)的⽗节点childNodes节点(元素)的⼦节点attributes节点(元素)的属性节点HTML DOM属性innerHTML属性获取元素内容nodeName属性规定节点名称nodeName属性是只读属性元素节点的nodeName与标签名称相同属性节点的nodeName与属性名称相同⽂本节点的nodeName始终是#text⽂本节点的nodeName始终是#text⽂档节点的nodeName始终是#documentnodeName始终包含HTML元素的⼤写字母标签名称nodeValue属性规定节点值元素节点的nodeValue是undefined或null⽂本节点的nodeValue是⽂本本⾝属性节点的nodeValue是属性值nodeType属性返回节点类型,只读属性元素类型nodeType元素1属性2⽂本3注释8⽂档9举例<!doctype html><html><!--<head><meta charset="utf-8"><title>Dom事件</title></head>--><body><p id="myid1" style="color:blue">我的⽂档内容1</p><p id="myid2" style="color:blue">我的⽂档内容2</p><script type="text/javascript">var node=document.getElementById("myid1"); //通过id号获取元素节点document.write(node.innerHTML+"<br>"); //输出元素节点的⽂本内容node.innerHTML="更新⽂档内容 via innerHTML"; //更新元素节点的⽂本内容document.getElementById("myid2").firstChild.nodeValue="更新⽂档内容via nodeValue";//更新元素节点的⽂本内容document.write(node.nodeName+"\t"+node.nodeValue+"<br>");document.write(node.firstChild.nodeName+"\t"+node.firstChild.nodeValue+"<br>"); //输出⽂本节点和值</script></body></html>HTML DOM访问查找HTML元素getElementById(id)获取指定id的元素getElementsByTagName(tag)获取带有指定标签名(p标签,a标签等)的所有元素getElementsByClassName(class)获取带有相同类名的所有元素HTML DOM修改改变元素⽂本内容 parentNode.innerHTML node.nodeValue改变CSS样式 node.style改变HTML属性创建新的HTML元素 createElement - createTextNode- appendChild删除已有的HTML元素 parentNode.removeChild (childNode) childNode.parentNode.removeChild(childNode)改变事件(处理程序)HTML DOM事件⽤户点击⿏标 onclick<input type="button" id="mybtn" value="提交" onclick="this.value='不提交'"/>//直接将javascript语句写在事件处理中< input type="button" id="mybtn" value="提交" onclick="myFunction(this)"/>//通过js函数执⾏,注意实参直接是指定元素<script type="text/javascript">Function myFunction(ele){ //虽然实参是this,但是在写函数时,不可以将形参命名为this,与关键字冲突ele.value="不提交";}</script>onload 事件可⽤于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的⽹页。
DOM详解⼀、简介DOM即(Document Object Model):⽂档对象模型,⽤来将标记型⽂档封装成对象,并将标记型⽂档中的所有内容(标签、⽂本、属性等)都封装成对象。
即标记型⽂档的⼀种解析⽅式。
因为封装为对象就可以对其中的属性和⾏为进⾏调⽤,以便于对这些⽂档及⽂档中的内容进⾏更⽅便的操作。
DOM解析⽅式:将标记型⽂档解析为⼀颗dom树,⽽树中的内容都封装为节点对象。
按照标签的层次关系体现出标签的所属,形成⼀个树状结构。
所以我们将DOM解析⽂档形成的document对象称为dom树,⽽树中的标签以及⽂本甚⾄属性称为节点。
这个节点也称为对象。
标签通常也称为页⾯中的元素。
注意:这个DOM解析的好处是可以对树中的节点进⾏任意操作,如增删查改。
但也有弊端:这种解析需要将标记型⽂档加载进内存。
意味着如果⽂档体积很⼤时较为浪费空间。
⼆、另⼀种解析⽅式:SAX是由⼀些组织定义的⼀种民间常⽤的解析⽅式,并不是w3c标准,⽽DOM是w3c的标准。
SAX的解析⽅式:基于事件驱动的解析。
好处:获取数据的速度快。
弊端:不遵从增删查改操作。
三、DOM三种模型DOM level 1:将html⽂档封装成对象。
DOM level 2:在level1的基础上加⼊了新功能,⽐如解析名称空间。
DOM level 3:将xml⽂档封装成了对象。
四、DHTML:动态html不是⼀门语⾔,⽽是多项技术综合体的简称,这些技术包括HTML、CSS、DOM、JavaScript。
四种技术(语⾔)在动态html中扮演的⾓⾊:HTML:⽤标签封装数据。
即负责提供标签,对数据进⾏封装,⽬的是便于对该标签中的数据进⾏操作。
CSS:对数据样式进⾏定义。
即负责提供样式属性,对标签中的数据进⾏样式的定义。
DOM:将⽂档和标签等所有内容进⾏解析。
即负责将标记型⽂档及⽂档中的内容进⾏解析。
并封装成对象,在对象中定义了更多的属性和⾏为,便于对对象进⾏操作。