下载文档原格式
任务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：将⽂档和标签等所有内容进⾏解析。
即负责将标记型⽂档及⽂档中的内容进⾏解析。
并封装成对象，在对象中定义了更多的属性和⾏为，便于对对象进⾏操作。
文档对象模型（DOM）文档对象模型（DOM）是表示文档（比如HTML和XML）和访问、操作构成文档的各种元素的应用程序接口（API）。
一般的，支持Javascript的所有浏览器都支持DOM。
本文所涉及的DOM，是指W3C定义的标准的文档对象模型，它以树形结构表示HTML和XML文档，定义了遍历这个树和检查、修改树的节点的方法和属性。
1、DOM眼中的HTML文档：树在DOM眼中，HTML跟XML一样是一种树形结构的文档，<html>是根（root）节点，<head>、<title>、<body>是<html>的子（children）节点，互相之间是兄弟（sibling）节点；<body>下面才是子节点<table>、<span>、<p>等等。
如下图：这个跟XML的结构有点相似。
不同的是，HTML文档的树形主要包含表示元素、标记的节点和表示文本串的节点。
2、HTML文档的节点备注接口nodeType常量nodeType值Element Node.ELEMENT_NODE 1 元素节点Text Node.TEXT_NODE 3 文本节点Document Node.DOCUMENT_NODE 9 document Comment MENT_NODE 8 注释的文本DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11 document片断Attr Node.ATTRIBUTE_NODE 2 节点属性DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根元素的Element对象（对于HTML文档，这个就是<html>标记）。
Javascript操作HTML文档的时候，document即指向整个文档，<body>、<table>等节点类型即为Element。
一、什么是DOMDOM是Document Object Model的缩写，是对XML文档的内容进行表示的模型。
它把XML 文档看作是一系列node和node间的关系，并且把每一个node都当作一个对象，所以叫文档对象模型。
DOM规范是W3C定义的，有三个Level：l Level 1: 定义了绝大多数基础功能l Level 2: 增加定义了namespacel Level 3: 对各个特性有了更好的支持DOM是与编程语言无关的，因此有多种实现，这里的都是用Java的API（其他的我也不会），用的是Sun定义的标准JAXP（Java API for XML Parsing），而JAXP仅仅是一个接口，它是调用其他的具体解析器来实现的。
此外不是用JAXP的DOM实现还有JDOM和DOM4J。
DOM将文档中的所有都看作节点，因此定义了一个最基础的接口是Node，它的字接口包括Element，Attr，Text等等，还包括了Document，也就是说DOM将整个文档看作是一个节点。
在Node中定义了很多方法，包括了读取节点（getFirstChild(), getNextSibling(), getLastNode(), getChildNodes(), getNodeName(), getNodeType(), getNodue(), getParentNode(), getAttributes(), getOwnerDocuemt()）、修改节点（insertBefore(), removeChild(), appendChild(), replaceChild(), setNodue()），这些方法都非常常用，但是没有定义创建节点的方法，创建节点的方法是在它的子接口Document中定义的（createXXX()），也没有定义按节点名字来得到节点的方法，这些方法是在Element和Document中定义的（getElementById(), getElementByTagName(), 注意在这里按照名字直接得到的是Element）。
文档对象模型（DOM）一、文档对象模型（DOM）DOM是Document Object Model（文档对象模型）的简称，是对XML文档进行应用开发、编程的应用程序接口（API）。
作为W3C 公布的一种跨平台、与语言无关的接口规范，DOM提供了在不同环境和应用中的标准程序接口，可以用任何语言实现。
DOM采用对象模型和一系列的接口来描述XML文档的内容和结构，即利用对象把文档模型化。
这种对象模型实现的基本功能包括：●描述文档表示和操作的接口；●接口的属性和方法；●接口之间的关系以及互操作。
DOM可对结构化的XML文档进行解析，文档中的指令、元素、实体、属性等所有内容个体都用对象模型表示，整个文档被看成是一个有结构的信息树，而不是简单的文本流，生成的对象模型就是树的节点，对象同时包含了方法和属性。
因此，对文档的所有操作都是在对象树上的进行。
在DOM中，树中的一切都是对象，不管是根节点还是实体的属性。
在DOM中主要有以下三个对象：● XML文档对象XML文档既是一种对象，同时又代表整个XML文档。
它由根元素和子元素组成。
● XML节点对象XML节点对象代表的是XML文档内部的节点，如元素、注释、名字空间等。
● XML节点列表XML文档模块列表代表了节点的集合。
利用DOM，开发人员可以动态地创建XML文档，遍历结构，添加、修改、删除内容等。
其面向对象的特性，使人们在处理XML解析相关的事务时节省大量的精力，是一种符合代码重用思想的强有力编程工具。
二、DOM的四个基本接口(引用自：)在DOM接口规范中，有四个基本的接口：Document，Node，NodeList以及NamedNodeMap。
在这四个基本接口中，Document接口是对文档进行操作的入口，它是从Node接口继承过来的。
Node接口是其他大多数接口的父类，象Documet，Element，Attribute，Text，Comment等接口都是从Node接口继承过来的。
1 课程名称：DOM模型详解2 知识点概述2.1、上次课程2.2、作业讲解2.3、本次预备讲解的知识点3、具体内容DOM是文档对象模型(Document Object Model)的简称，借助与DOM模型，可以将一个结构化的文档转换成DOM树，程序可以访问，修改树里的节点，也可增加树里的节点，在程序操作这棵DOM树时，结构化的文档也随之动态改变。
掌握了DOM编程模型，就拥有了使用JavaScript脚本动态修改XHTML页面的能力。
DOM模型不仅可以操作XHTML文档，还可以操作XML文档3.1、DOM模型概述XHTML文档只有一个根节点，而其他节点以根节点的子节点或孙子节点的形式存在，最终形成一个结构化文档。
DOM模型则用于导航，访问结构化文档的节点，并提供新增，修改，删除结构化文档的能力。
DOM并不是一种技术，它只是访问结构化文档的一种思想（方式），基于这种思想，各种语言都有自己的DOM解析器。
DOM解析器的作用就是完成结构化文档和DOM树之间的转换关系。
对与支持DOM 模型的浏览器，当浏览器转入一个XHTML页面后，自动得到对应的DOM树,通过JavaScript 脚本修改这颗DOM树时，浏览器里的XHTML页面会随之改变如图：3.2、DOM模型和XHTML文档DOM为常用的XHTML元素提供了一套完整的继承体系.从页面的document对象到每个常用的XHTML元素，DOM模型提供了对应的类。
每个类都提供了相应的方法来操作DOM元素本身,属性及其子元素，DOM模型允许以树的方式操作XHTML文档中的每一个元素。
3.2.1、XHTML元素之间的继承图DOM模型里的XHTML元素的继承关系，如下图：常用XHTML元素3.2.3、XHTML元素之间常见的包含关系从图中可以看出，HTMLDocument对象作为整个HTML文档的最大对象，里面可能包含一个HTMLBodyElement对象，HTML文档中还有两个对象体系：表单对象和表格对象。
文档对象模型（DOM）文档对象模型（DOM）属于VBScript客户端扩展部分，在文档对象模型中提供了大量的对象，这些对象应用于浏览器上，这些对象在我们编写脚本时发挥着重要的作用。
当用户在浏览器中打开一个页面时，浏览器就会自动创建文档对象模型中的一些对象，这些对象存放了HTML页面的属性和其他的相关信息，因为这些对象在浏览器上运行，所以我们有时也称之为浏览器对象。
浏览器对象的层次图如图3-10所示，这个文档对象模型是Navigator的文档对象模型。
图3-10 文档对象模型（DOM）在这个层次图中，每个对象都是它的父对象的属性。
例如，Window对象是Document 对象的父对象，所以在引用Document对象时使用Window.Document。
在这里，Document 对象也就是Window对象的属性。
对于每一个页面，浏览器都会自动创建Window对象、Document对象、Location对象、Navigator对象、History对象。
而基于这个层次结构，还可以创建其他对象。
例如，如果在页面中有一个表单对象（名称为MyForm），那么在引用MyForm对象时，就可以使用Window.Document.MyForm。
在这里可以看出，Document对象是Window对象的属性，而如果页面中存在form对象，那么，form对象也是Document对象的属性。
在VBScript中如果要引用某个对象的属性，必须通过整个对象属性的完整路径来进行引用，也就是说，必须指明这个对象的属性的所有父对象。
例如，假如在页面上表单对象的名称为MyForm，而在表单中有—个文本框，名称为MyTextBox，而我们希望能够获取这个文本框中的字符串，那么必须从最高一级对象──Window对象开始引用。
引用方式如下所示：Window.Document.MyForm.MyTextBox.value。
3．6．2 Windows对象Window对象在VBScript浏览器对象的层次图中位于最高一层，具有唯一性，只要浏览器窗口打开，即使在浏览器中没有加载任何页面，VBScript中同样也会建立Window对象。
一、DOM简述DOM—Document Object Model,它是W3C国际组织的一套Web标准。
它定义了访问HTML文档对象的一套习属性、方法和事件。
DOM是以层次结构组织的节点或信息片断的集合。
文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。
DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。
浏览器对象是一个分层结构，也称为文档对象模型，如下图所示：从上图可以看出：（1）打开网页后，首先看到的是浏览器窗口，即顶层的window对象。
（2）其次，看到的是网页文档的内容，即document文档。
（3）定位对象：window.document.myform.text1或document.myform.text1因为window窗口对象是所有页面的根对象，所以常常省略。
(4)地址对象location和历史对象history，它他对应IE浏览器中的地址栏和前进/后退按钮。
二、窗口window常用属性：1 window.clesed：指明窗口是否关闭。
2 window.defaultValue：窗口状态栏的默认信息。
3 window.docement：表示浏览器窗口中的HTML文档。
4 window.location：表示有关当前URL的信息。
5 window.history：表示有关当前访问过的RUL的信息。
6 ：设置或检索窗口或框架的名称。
7 window.screen：包含有关客户的屏幕和显示性能的信息。
8 window.screenX：窗口X坐标9 window.screenY：窗口Y坐标10 window.status：设置或检索窗口状态栏中的信息。
11 window.title：设置或检索窗口顶部标题栏中的信息。
12 window.self：当前窗口。
13 window.parent：当前窗口的最上层窗口。
14 window.top：当前显示的窗口的最上层窗口。
dom什么意思中文
DOM是网页中用来表示文档中对象的标准模型，通过JavaScript 可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。
文档对象模型（Document Object Model，简称DOM）。
扩展资料
DOM是Document Object Model文档对象模型的缩写。
根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的'接口，使得你可以访问页面中其他的标准组件。
简单理解，DOM解决了Netscape的JavaScript和Microsoft的JavaScript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。
DOM是以层次结构组织的节点或信息片断的集合。
这个层次结构允许开发人员在树中导航寻找特定信息。
分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。
由于它是基于信息层次的，因而 DOM 被认为是基于树或基于对象的。
HTML DOM 定义了访问和操作HTML文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
向你推荐的相关文章
相关文章列表
微信扫码分享。
