第6章 文档对象模型(DOM
任务6 DOM文档解析
任务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文档的对象。
第6章 DOM模型
1
重点
了解DOM的意义； 认识并理解DOM树及其相关操作：
DOM树的构成； 节点的类型； 节点的访问：
网页内容的操作； 网页结构的操作； 网页样式的操作； 网页行为的操作；
为什么要学习DOM？
➢我们学习JS，为什么还需要了解DOM？
DOM是JavaScript实现web应用的核心内容， 通过 JavaScript，可以重构整个页面文档 （HTML 、XHTML 或XML）：
Web浏览器对DOM的支持
如何学习DOM？——DOM树
➢ 了解DOM与页面文档结构的关系：
DOM以一棵拥有很多相互关联的节点的树形 结构（简称DOM树）来表示页面文档结构， 即每一个DOM节点都对应文档中的一个具体 元素，JS通过访问DOM节点，就能访问页 面文档中的所有组成信息。
11
DOM树/节点树/文档树结构
案例：多种方式访问节点。
假设有如下页面结构：
<div id=“outer”> <ul id=“starList”> <li id=“star1”>list1</li> <li id=“star2”>list2</li> <li id=“star3”>list3</li> </ul>
</div>
如何访问id值为“star2”的结点？
DOM简介——DOM标准的划分
W3C组织标准化了DOM，发行了该标准的三 个版本：1级DOM、2级DOM和3级DOM 。
DOM1级（DOM Level 1）于1998年10月成为W3C 的推荐标准。DOM1级由两个模块组成：DOM核心 （DOM Core）和DOM HTML。其中，DOM核心 规定的是如何映射基于XML的文档结构，以便简化 对文档中任意部分的访问和操作。DOM HTML模块 则在DOM核心的基础上加以扩展，添加了针对 HTML的对象和方法。
第六章 DOM文档对象模型
版权所有◎ 版权所有◎鹏程国际计算机教育
6
HTML DOM概述 概述
以上代码对应的DOM树形结构为: 树形结构为: 以上代码对应的 树形结构为
版权所有◎ 版权所有◎鹏程国际计算机教育
7
节点(Node)概述 概述 节点
版权所有◎ 版权所有◎鹏程国际计算机教育
15
获取,设置, 获取,设置,删除元素节点的属性
<element>.getAttribute(name) :该方法用来获 该方法用来获 得元素节点中name属性的值 属性的值. 得元素节点中 属性的值 <element>.setAttribute(name,value) :该方法用 该方法用 来设置元素节点中name属性的值 属性的值. 来设置元素节点中 属性的值 <element>.removeAttribute(name) :该方法用 该方法用 来删除元素节点中的name属性 属性. 来删除元素节点中的 属性
1
DOM概述 概述
DOM(Document Object Model) DOM是Document Object Model文档对象模型 是 文档对象模型 的缩写.根据W3C DOM规范 的缩写.根据 规范 ),DOM是一种与 (/DOM/), ), 是一种与 浏览器,平台,语言无关的接口, 浏览器,平台,语言无关的接口,使得你可以访 问页面其他的标准组件.简单理解, 问页面其他的标准组件.简单理解,DOM解决了 解决了 Netscape的Javascript和Microsoft的Jscript之 的 和 的 之 间的冲突,给予web设计师和开发者一个标准的 间的冲突,给予 设计师和开发者一个标准的 方法,让他们来访问他们站点中的数据, 方法,让他们来访问他们站点中的数据,脚本和 表现层对像. 表现层对像.
DOM文档对象模型简介
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 事件可⽤于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的⽹页。
第6章文档对象模型DOM
6.2.3 MSXML文档对象模型的接口一览及重要 接口介绍
1．IXMLDOMDocument接口、XMLDocument类和 FreeThreadedDOMDocument类（文档）
2．IXMLDOMNamedNodeMap接口 3．IXMLDOMNode接口 4．IXMLDOMNodeList接口 5．IXMLDOMElement接口 6. IXMLDOMAttribute接口 7. IXMLDOMDocumentType接口 8．IXMLDOMEntity接口 9. IXMLDOMNotation接口 10. IXMLDOMNotationImplementation接口
<<接口>> 处理指令（ProcessingInstruction） +获取目标() +获取或设置数据()
<<接口>> 文档碎片（DocumentFragment）
<<接口>> DOCTYPE +获取名称() +获取实体() +获取标记法()
<<接口>> 实体（Entity） +获取PUBLIC标识符() +获取SYSTEM标识符() +获取标记法名称()
1．文档
2．元素
3．属性 b
4．文本
5．注释
6．CDATA
6.1.3 DOM接口规范中的四个基本接口
在DOM接口规范中，有四个基本的接口：Document ，Node，NodeList以及NamedNodeMap。
1．Document接口 2．Node接口 3．NodeList接口 4. NamedNodeMap接口
第六章 DOM对象模型
【返回】
随堂练习及案例
状态栏闪烁效果 别惹女孩生气
2. document对象
document 对象代表整个 HTML 文档，可 用来访问页面中的所有元素。 document 对象是 window 对象的一个部分。
document对象属性
属性 描述
fgColor
bgColor linkColor alinkColor vlinkColor lastModified title
code millisec 必需。要调用的函数或要执行的代码串。 必需。在执行代码前需等待的毫秒数。
window.setTimeout()示例1
<html> <head> <script> function timedMsg() { var t1=setTimeout("document.getElementById('b1').value=' 变了'",2000); var t=setTimeout("alert('5秒了!')",5000); } </script> </head> <body> <input type="button" id="b1" value="武科大" onClick = "timedMsg()"> </body>
window对象属性
属性 closed length 描述 返回窗口是否已被关闭。 设置或返回窗口中的框架数量。
name
opener parent self status
文档对象模型
window对象
• window对象代表了打开的浏览器窗口或者文档 中的iframe框架，可对当前浏览器窗口进行相 应的操作。window对象是全局变量、函数的所 属对象，默认在JavaScript语言中定义的变量、 函数都被附加到window对象中称为全局属性或 方法。
• JavaScript语言中定义的全局变量、函数等默 认被附加到window对象上
文档对象模型（DOM）
基于HTML5的APP开发教程
计算机与信息工程系
本讲内容
• DOM概述 • HTML DOM简介 • JavaScript语言访问DOM • 与DOM相关的对象 • DOM相关事件
DOM概述
• 文档对象模型DOM（Document Object Model）是 W3C（万维网联盟）提供的标准，其定义了访问 HTML和XML的标准。其目的是将HTML和XML中的 标签对象化，并通过DOM树结构模式访问HTML元素 和XML元素及其元素属性，DOM对象中提供了大量的 访问HTML文档和XML文档以及SVG的方法和属性。 DOM提供了树形结构，提供方法以访问树，可改变树 结构、样式以及内容，同时DOM对象是一组节点和对 象组，提供了各种属性和方法，节点可附加事件处理， 最重要的是DOM对象将脚本语言与Web页面链接起来。
ame()
open()
打开一个流，以收集来自任何 document.write() 或
document.writeln() 方法的输出
write()
向文档写 HTML 表达式 或 JavaScript 代码
writeln()
等同于 write() 方法，不同的是在每个表达式之后
写一个换行符
计算机与信息工程系
DOM文档对象模型
showModelessDialog弹出非模态窗口，
body对象的事件
（1）onload：网页加载完毕时触发，浏览器是一边下载文 档、一边解析执行，可能会出现JavaScript执行时需要操作 某个元素，这个元素还没有加载，如果这样就要把操作的代 码放到body的onload事件中，或者可以把JavaScript放到 元素之后。元素的onload事件是元素自己加载完毕时触发， body onload才是全部加载完成
案例：自动在复制的内容后添加版权声 明。（具体代码看备注）
思路 1、发生在oncopy事件发生时 2、三步走：
第一 获取剪贴板内容 第二 把获取的内容后面加上版权申明。。。 第三 设置剪贴板内容
注意：不能直接在oncopy中执行对粘贴板的操作，因此设定定时器， 0.1秒以后执行。
window对象的属性4
(3)重新导航到指定的地址： navigate("");
setInterval每隔一段时间执行指定的代码，第一个参 数为代码的字符串，第二个参数为间隔时间（单位毫 秒），返回值为定时器的标识 setInterval("alert('hello')", 5000); clearInterval：取消setInterval的定时执行。 clearInterval要指定清除那个定时器的标识，即 setInterval的返回值。
Value 获取表单元素 几乎所有DOM元素都有innerText、innerHTML 属性（注意大小写），分别是元素标签内内容的文 本表示形式和HTML源代码，这两个属性是可读可 写的。 用innerHTML也可以替代createElement，属于 简单、粗放型、后果自负的创建
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6.5 上机指导
对XML文档节点的操作是理解DOM的关键。本章讲解 了DOM的组成、DOM的接口、DOM的微软实现模型，并且 掌握了利用DOM加载XML文档、保存XML文档以及对XML 文档中的节点进行操作，包括删除节点、增加节点、修改节 点以及遍历节点等内容。在了解上述这些内容的基础上，本 节对这些知识点进行巩固。 实验一：利用DOM加载指定内容的XML 文档片段 实验二：利用DOM修改XML文档中指定节点的属性信 息 实验三：利用DOM在XML文档中删除一个元素节点
6.3.3 处理节点
整个XML文档对于DOM来说，就是节点的集合，因此 对节点的处理是整个DOM的核心。正如节点接口是DOM接 口的核心一样。 1．获取节点信息
2．添加与删除节点
3. 更改节点信息
6.3.4 保存文档对象
当使用DOM的文档接口打开XML文档的时候，仅仅把文档 以树状的结构保存在内存中，在这期间的操作，仅仅是对内存中 的“XML文档”进行操作，并且显示。一旦，将文档接口释放， 则系统会清空内存中的文档，而源文档没有发生任何改变。因此 ，为了保存操作的结果，一定要对文档进行保存。
6.1.1 一棵简单的DOM树
XML文档对象模型中最重要的三个概念是：一、所有XML内 容（元素、属性、文本内容等）都被视为节点；二、在节点之间 可以随机“移动”，从一个节点可以访问邻近的其他节点；三、 所有这些节点在内存中被构建成一棵树结构。
6.1.2 DOM的核心部分
XML文档中的所有一切都被视为节点（Node）。 节点是DOM对XML数据的抽象。在XML文档中，一个具体 的XML节点与面向对象编程语言中的一个对象对应。每个对象所 属的类（Class），都实现相应的XML DOM节点接口（Interface ）。节点接口之间有继承关系，如元素对象首先实现元素接口， 元素接口则从节点接口继承派生而来。元素接口有自己的特性， 但又具有一般节点的共性。下面详细的介绍各种节点的类型。 1．文档 2．元素 3．属性 b 4．文本 5．注释 6．CDATA
第6章 文档对象模型（DOM）
DOM的全称是Document Object Model，也即文档对 象模型。它是W3C制定的一套标准接口规范，是给HTML与 XML文档使用的一整套API接口，并且这套接口与编程语言 无关。在前面几个章节中，本书已经讲解了有关XML的基本 知识。读者应该了解，XML是一种可扩展性标识语言，能够 让程序员自己创造标识，标识所想表示的内容。简单的说， DOM的作用就是让程序员可以随时任意的操作和处理XML 文档中的数据。
6.2.2 接口与实现
接口建立了对象或者类和应用程序之间的关系，简单的说， 接口提供了一些属性和方法，应用程序开发者可以调用这些属性 和方法来构件自己的应用程序。
6.2.3 MSXML文档对象模型的接口一览及重要 接口介绍
1．IXMLDOMDocument接口、XMLDocument类和 FreeThreadedDOMDocument类（文档） 2．IXMLDOMNamedNodeMap接口 3．IXMLDOMNode接口 4．IXMLDOMNodeList接口 5．IXMLDOMElement接口 6. IXMLDOMAttribute接口 7. IXMLDOMDocumentType接口 8．IXMLDOMEntity接口 9. IXMLDOMNotation接口 10. IXMLDOMNotationImplementation接口
6.1.3 DOM接口规范中的四个基本接口
在DOM接口规范中，有四个基本的接口：Document ，Node，NodeList以及NamedNodeMap。 1．Document接口 2．Node接口 3．NodeList接口 4. NamedNod范，通过各软件厂商以软件 包的方式实现DOM接口，才提供真正能用的功能。在本节 中，首先讨论为什么要使用DOM接口；接着，讨论DOM的 接口特性，以及如何实现DOM的接口；最后详细讲解微软 的MSXML文档对象模型的实现。
6.1 DOM的组成
DOM作为W3C的标准接口规范，目前，主要由三部分 组成，包括：核心部分（core）、HTML相关接口部分和 XML相关接口部分。核心部分是结构化文档比较底层对象的 集合，一般包括文档、元素、文本、属性和注释等。这一部 分所定义的对象已经完全可以表达出任何HTML和XML文档 中的数据了。HTML接口和XML接口两部分则是专为操作具 体的HTML文档和XML文档所提供的各种接口，通过使用这 些接口，使得对这两类文件的操作更加方便。
6.2.1 为什么要使用DOM接口
XML文档是一个文本文件，要对该文档文件进行操作 ，首先必须书写一个能够识别XML文档信息的文本文件阅读 器，也就是通常所说的XML解析器，由它来帮助解释XML 文档并提取其中的内容。这是一项非常耗时耗精力的工作， 因为程序员不得不面对复杂的XML语法，来编写处理这些语 法的XML解析器；况且更加糟糕的是，如果需要在不同的应 用程序或开发环境中访问XML文档中的数据，这样的分析器 代码就要被重写多次。
6.3 DOM的应用
通过上面两个小节的学习，对DOM的基本概念，DOM 的基本接口，以及对微软的文档对象模型有了基本的了解。 在这个小节里，将利用前面学到的知识，来具体的讲解 DOM的应用，也就是说，DOM是用来处理XML文档的，那 么具体应该如何用DOM来操作XML文档呢，包括创建XML 文档、验证XML文档、加载XML文档、处理文档的节点、 保存文档等等，在这个小节里，将详细的讲解这些内容。
6.3.5 验证文档
所谓验证文档，就是解析器使用DTD或者Schema来验 证XML文档是否有效。在学习了XML的基本知识后，一个 XML文档不仅应该是格式完好的，更应该是有效的。 在MSXML4.0中，通过IXMLDOMDocument接口的 validateOnParse属性，来控制是否验证文档，默认情况下 是true。如果不想验证，则把这个属性设置为false。在设 置为true的情况下，如果没有通过验证，则不能加载该文档 ，因为DTD出错了，或者Schema有问题。
6.3.6 一个实例程序
现在，让做一个有意义的实例程序，该程序描述如下：开发 一个客户端界面，该界面允许用户输入关于图书的基本信息，然 后单击“提交”按扭，由系统根据输入的信息，自动生成一个 XML文档。
6.4 小结
本章主要讲解了有关DOM的基础知识，DOM是专用于 操作XML文档的接口规范。在本章中，首先学习了DOM的 基本组成，接着，学习了DOM接口规范中的四个基本接口 ，然后了解了微软的MSXML文档对象模型的实现，最后学 习了关于DOM的一些应用，如遍历节点、增加节点、删除 节点、修改节点内容、保存XML文档等，并给出了一个现实 应用中的实例程序，来帮助我们更好的学习DOM。
6.3.1 添加DOM处理引用
在应用DOM之前，应该先将实现DOM的动态库加载到 工程中。 1．在VB 6.0中，加载MSXML 4.0动态库
6.3.1 添加DOM处理引用
2. 在.NET 2003中，加载MSXML 4.0动态库
6.3.2 加载XML文档
在对XML文档处理之前，必须利用DOM将XML文档加载到 内存，这样就能对该文档进行处理。XML文档的来源有很多，即 可以是本地硬盘上的一个文件，也可以是从网络中传送过来的流 对象。