DOM.docx
《DOM.docx》由会员分享，可在线阅读，更多相关《DOM.docx（11页珍藏版）》请在冰豆网上搜索。
DOM
MODOM：
mdomisaninterfacetoaccessastructureddocument.Itcontainsmethodstotraverseandmodifydocumentstructure,getandsetattributes,etc.Somepointsonmdomdesignrequirements:
∙StructuralcompatibilitywithW3CDOM,exceptforattributevaluestructure.
∙PossibilitytouseitefficientlyasaninputandoutputinterfaceforDOMtransformations.
∙Possibilitytouseofdifferentimplementationfordifferentneeds（evenwithinasingledocumenttree）.
∙ConceptsofthemasterandresourcedocumentslivinginthesameDOMobject.
∙Suitabilityfortraversalofverylargedocuments.
∙Attributeparsingandextendednodetypeassignmentsforknownelements.
∙Integrationwith（extended）XPathexpressions.
∙Supportforattributesthatreference（"linkto"inmdomterms）othernodes.
∙SupportforDOMmutationlistener.
∙Keepingtrackofchangesinthetree.
1.除属性值节点外，与W3CDOM结构兼容。
2.提供有效的DOM变化输入输出接口。
3.Possibilitytouseofdifferentimplementationfordifferentneeds（evenwithinasingledocumenttree）.
4.ConceptsofthemasterandresourcedocumentslivinginthesameDOMobject.
5.适合浏览大文档。
6.对已知元素的属性解析以及节点类型分配。
7.添加（extended）XPath模块。
8.支持连接到其他节点的属性功能。
9.支持DOM元素变化监听。
10.持续跟踪节点变化情况。
TraversalandNodeIduniquelyidentifyanode
classTraversal和typedefNodeData*NodeId可以唯一确定一节点。
HTML文档中的每个成分都是一个节点。
节点
根据DOM，HTML文档中的每个成分都是一个节点。
DOM是这样规定的：
∙整个文档是一个文档节点
∙每个HTML标签是一个元素节点
∙包含在HTML元素中的文本是文本节点
∙每一个HTML属性是一个属性节点
∙注释属于注释节点
Node层次
节点彼此都有等级关系。
HTML文档中的所有节点组成了一个文档树（或节点树）。
HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
下面这个图片表示一个文档树（节点树）：
另一方面，DOM还提供了一个API，允许开发人员添加、编辑、移动或删除树中任意位置的节点，从而创建一个应用程序。
在诸如DOM这样基于树的API中，解析器将在内存中构造一颗数据树。
DOMLevel3包括对创建Document对象（以前的版本将这个任务留给实现，使得创建通用应用程序很困难）的更好支持、增强的名称空间支持，以及用来处理文档加载和保存、验证以及XPath的新模块；XPath是在XSL转换（XSLTransformation）以及其他XML技术中用来选择节点的手段。
DOM是与编程语言无关的，因此有多种实现。
DOM是以层次结构组织的节点或信息片断的集合。
这个层次结构允许开发人员在树中导航仪寻找特定信息。
分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。
由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的。
对于特别大的文档，解析和加载整个文档可能很慢且很耗资源，因此使用其他手段来处理这样的数据会更好。
这些基于事件的模型，比如SimpleAPIforXML（SAX），适用于处理数据流，即随着数据的流动而依次处理数据。
基于事件的API消除了在内存中构造树的需要，但是却不允许开发人员实际更改原始文档中的数据。
另一方面，DOM还提供了一个API，允许开发人员添加、编辑、移动或删除树中任意位置的节点，从而创建一个引用程序。
解析器是一个软件应用程序，设计用于分析文档（这里是指XML文件），以及做一些特定于该信息的事情。
在诸如SAX这样基于事件的API中，解析器将向某种监听器发送事件。
在诸如DOM这样基于树的API中，解析器将在内存中构造一颗数据树。
从DOMLevel1开始，DOMAPI包含了一些接口，用于表示可从XML文档中找到的所有不同类型的信息。
它还包含使用这些对象所必需的方法和属性。
Level1包括对XML1.0和HTML的支持，每个HTML元素被表示为一个接口。
它包括用于添加、编辑、移动和读取节点中包含的信息的方法，等等。
然而，它没有包括对XML名称空间（XMLNamespace）的支持，XML名称空间提供分割文档中的信息的能力。
DOMLevel2添加了名称空间支持。
Level2扩展了Level1，允许开发人员检测和使用可能适用于某个节点的名称空间信息。
Level2还增加了几个新的模块，以支持级联样式表、事件和增强的树操作。
当前正处于定稿阶段的DOMLevel3包括对创建Document对象（以前的版本将这个任务留给实现，使得创建通用应用程序很困难）的更好支持、增强的名称空间支持，以及用来处理文档加载和保存、验证以及XPath的新模块；XPath是在XSL转换（XSLTransformation）以及其他XML技术中用来选择节点的手段。
DOM的模块化意味着作为开发人员，您必须知道自己希望使用的特性是否受正在使用的DOM实现所支持。
确定特性可用性
DOM推荐标准的模块性质允许实现者挑选将要包括到产品中的部分，因而在使用某个特定的特性之前，首先确定该特性是否可用可能是必要的。
本教程仅使用DOMLevel2CoreAPI，不过在着手您自己的项目时，了解如何能够检测特性是有所帮助的。
DOM中定义的接口之一就是DOMImplementation。
通过使用hasFeature（）方法，您可以确定某个特定的特性是否受支持。
DOMLevel2中不存在创建DOMImplementation的标准方法，不过下面的代码将展示如何使用hasFeature（）来确定DOMLevel2样式表模块在某个Java应用程序中是否受支持。
importjavax.xml.parsers.DocumentBuilderFactory;
importjavax.xml.parsers.DocumentBuilder;
importorg.w3c.dom.DOMImplementation;
publicclassShowDomImpl{
publicstaticvoidmain（Stringargs[]）{
try{
DocumentBuilderFactorydbf=DocumentBuilderFactory.newInstance（）;
DocumentBuilderdocb=dbf.newDocumentBuilder（）;
DOMImplementationdomImpl=docb.getDOMImplementation（）;
if（domImpl.hasFeature（"StyleSheets","2.0"））{
System.out.println（"StyleSheetsaresupported."）;
}else{
System.out.println（"StyleSheetsarenotsupported."）;
}
}catch（Exceptione）{}
}
}
（DOMLevel3将包括用于创建DOMImplementation的标准方法。
本教程将使用单个文档来展示DOMLevel2CoreAPI的对象和方法。
基本的XML文件：
本教程中的所有例子都是用了一个包含如下节点的XML文件，它表示输入某个商业系统的订单。
回顾一下，XML文件的基本组成部分包括：
XML声明：
基本的声明
xmlversion"1.0"?
>将这个文件定义为XML文档。
在声明中指定一种字符编码的情况并不鲜见，如下所示。
通过这种方式，不管该XML文件使用的语言或字符编码是什么，只要解析器理解特定的编码，它就能够正确地读取该XML文件。
DOCTYPE声明：
XML是人机之间交换信息的便利手段，但是要使它能够顺利地工作，必须要有一个公共的词汇表。
可选的DOCTYPE声明可用于指定一个应该用来与此文件做比较的文档（在本例中为orders.dtd），以确保不会产生任何混淆或丢失信息（例如，丢失一个userid或错误拼写某个元素名称）。
以这种方式处理过的文档称为有效的文档。
成功的有效性检查并不是XML所必需的。
HTMLDOM是HTMLDocumentObjectModel（文档对象模型）的缩写，HTMLDOM则是专门适用与HTML/XHTML的文档对象模型。
熟悉软件开发的人员可以将HTMLDOM理解为网页的API。
它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。
例如Javascript就可以利用HTMLDOM动态的修改网页。
DOM是DocumentObjectModel文档对象模型的缩写。
根据W3CDOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面其他的标准组件。
简单理解，DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
DOM是以层次结构组织的节点或信息片断的集合。
这个层次结构允许开发人员在树中导航寻找特定信息。
分析该结构通常需要加载整个文档和构造层次结构，然后才能做任何工作。
由于它是基于信息层次的，因而DOM被认为是基于树或基于对象的。
先来看一张简单的文档树
很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:
NodeA.firstChild=NodeA1
NodeA.lastChild=NodeA3
NodeA.childNodes.length=3
NodeA.childNodes［0］=NodeA1
NodeA.childNodes［1］=NodeA2
NodeA.childNodes［2］=NodeA3
NodeA1.parentNode=NodeA
NodeA1.nextSibling=NodeA2
NodeA3.prevSibling=NodeA2
NodeA3.nextSibling=null
NodeA.lastChild.firstChild=NodeA3a
NodeA3b.parentNode.parentNode=NodeA
DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。
insertBefore（）--在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。
replaceChild（）--在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。
removeChild（）--从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。
appendChild（）--添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。
cloneNode（）--创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。
为了在一棵文档树中访问或者建立一个新的节点,可以用下面这些方法:
getElementById（）
getElementsByTagName（）
createElement（）
createAttribute（）
createTextNode（）
注意:
在一个页面中只有一个文档对象,除了getElementsByTagName（）外,其它方法均只能通过document.methodName（）调用。
再看一下下面这个例子:
Thisisasampleparagraph.
--
alert（document.documentElement.lastChild.firstChild.tagName）;
//-->
结果将会显示"P",下面是一些解释
document.documentElement-givesthepage'sHTMLtag.
lastChild-givestheBODYtag.
firstChild-givesthefirstelementintheBODY.
tagName-givesthatelement'stagname,"P"inthiscase.
另一个:
Thisisasampleparagraph.
--
alert（document.documentElement.lastChild.firstChild.tagName）;
//-->
这个例子和上面并没有什么大的区别,仅仅是多了一个空行,但是在NS中,会自动为空行加上一个节点所以返回值是"undefined",而在IE中将跳过空行仍然指向P标签。
更常用的方法:
Thisisasampleparagraph.
...
alert（document.getElementById（"myParagraph"）.tagName）;
这种方法你不用关心节点在文档树的哪一个地方,而只要保证在页面中它的ID号是唯一的就可以了。
接下来一种访问元素节点的方法是document.getElementsByTagName（）,它的返回值是一个数组,例如你可以通过下面的例子改变整个页面的连接：
varnodeList=document.getElementsByTagName（"A"）;
for（vari=0;inodeList[i].style.color="#ff0000";
attribute和attributes
attribute对象和元素相关,但是却没有被认为是文档树的一部分,因此属性不能作为子节点集合的一部分来使用。
有三种方法可以为元素建立新的属性
1.
varattr=document.createAttribute（"myAttribute"）;
attr.value="myValue";
varel=document.getElementById（"myParagraph"）;
el.setAttributeNode（attr）;
2.
varel=document.getElementById（"myParagraph"）;
el.setAttribute（"myAttribute","myValue"）;
3.
varel=document.getElementById（"myParagraph"）;
el.myAttribute="myValue";
你可以在html标签种定义自己的属性:
Thisisasampleparagraph.
...
alert（document.getElementById（"myParagraph"）.getAttribute（"myAttribute"））;
返回值将是"myValue".但是请注意这里必须使用getAttribute,而不是AttributeName,因为有一些浏览器并不支持自定义属性。
attributes也可以被轻易的从一个元素中删除,你可以使用removeAttribute（）或者将element.attributeName指向一个null值。
通过attributes我们就可以产生一些动态效果：
Textinaparagraphelement.
...codeforthelinks...
document.getElementById（'sample1'）.setAttribute（'align','left'）;
document.getElementById（'sample1'）.setAttribute（'align','right'）;
另一种:
left;">Textinaparagraph
element.
...codeforthelinks...
document.getElementById（'sample2'）.style.textAlign='left';
document.getElementById（'sample2'）.style.textAlign='right';
跟上面的例子一样,展示了可用通过元素修改style中的属性,甚至是class中的.唯一要提到的是textAlign是从style中的text-align中演变而来的,有一条基本规律,就是style中的属性如果出现-则在dom中将会被去掉并且随后的一个字母将改为大写,还有一点就是如果即使元素中没有style属性,上述例子同样可以使用。
textnodes:
先看一下例子：
Thisistheinitialtext.
...codeforthelinks...
document.getElementById（'sample1'）.firstChild.nodeValue=
'Onceuponatime...';
document.getElementById（'sample1'）.firstChild.nodeValue=
'...inagalaxyfar,faraway';
首先textnodes并没有像elements那样具有id属性,所有它并不能直接通过document.getElementById（）或者document.getElementsByTagName（）访问
看一下下面的结构也许会更明白一些：
可以看出通过document.getElementById（'sample1'）.firstChild.nodeValue就可以读取或者设置textnodes的值了。
另一个更加复杂一点的例子：
Thisistheinitialtext.
它的文档结构
在这里通过document.getElementById（'sample1'）.firstChild.nodeValue讲仅仅改变"Thisisthe"
而initialtext.将不会改变.在这里大家应该看到了它和innerHTML的不同了.当然你也可以这样用：
document.getElementById（'sample3'）.firstChild.nodeValue=
'Onceuponatime...';
document.getElementById（'sample3'）.firstChild.nodeValue=
'...inagalaxyfar,faraway';
其中的html代码将不会被解释,浏览器将把他们当成普通的文本来显示。
创建和删除textnodes:
varmyTextNode=document.createTextNode（"mytext"）;
通过上面的代码你可以创建一个新的textnode,但是它并不是文档树的一部分,要让它显示在页面上就必须让它成为文档树中某一个节点的child,因为
textnodes不能有儿子,所以你不能将它加入到一个textnodes中,attribute也不属于文档树的一部分,这条路也不行,现在只剩下elementsnodes
了,以下的例子展示了如何添加和删除一个textnode：
Initialtextwithinaparagraphelement.
...codetoaddatextnode...
vartext=document.createTextNode
升级会员 