DOM技术.docx

《DOM技术.docx》由会员分享，可在线阅读，更多相关《DOM技术.docx（22页珍藏版）》请在冰豆网上搜索。

DOM技术

DOM技术

1、DOM

（1）产生的技术背景

●主要考虑IE和NetscapeNavigator之间的差别

DOM就是文档对象模型（DocumentObjectModel），最初是W3C为了解决浏览器大战时代不同浏览器之间的差别而制定的，主要就是IE和NetscapeNavigator之间的差别。

●最初出现的是DOMLevel1规范。

目前主流的浏览器都可以支持DOMLevel2HTML规范。

●主要的功能

编程者可以使用DOM增加文档、定位文档结构、填加修改删除文档元素。

W3C的重要目标是把利用DOM提供一个使用于多个平台的编程接口。

W3CDOM被设计成适合多个平台，可使用任意编程语言实现的方法。

（2）可以在这里找到所有与DOM相关的规范---http:

//www.w3.org/DOM/

（3）DOM是一种详细描述HTML/XML文档对象规则的API

DOM解释器是由W3C官方制定的标准解释器Api，只要符合该标准的编程接口都可以用来操作XML。

它规定了HTML/XML文档对象的命名协定，程序模型，沟通规则等。

在XML文档中，我们可以将每一个标识元素看作一个对象---它有自己的名称和属性。

（4）XML和DOM之间相互配合

XML创建了标识，而DOM的作用就是对XML中的各个标签进行操作和显示（也就是我们常说的解析技术）。

下面给出XML和DOM对象之间的对应的关系：

节点类型例子

Documenttype

DOCTYPEfoodSYSTEM"food.dtd">

Processinginstruction

xmlversion="1.0"?

>

ElementCarlsberg

Attributetype="beer"

TextCarlsberg

（5）DOM可以实现与平台无关的解析

DOM规范与Web世界的其他标准一样受到W3C组织的管理，在其控制下为多重平台和语言使用DOM提供一致的API，W3C把DOM定义为一套抽象的类而非正式实现DOM。

因此可以选择任何满足DOM的解释器所提供的编程接口所实现的应用程序.将会很方便的移植到其他实现了DOM编程接口的平台工作。

2、DOM实际上有两种，HTMLDOM和XMLDOM

（1）HTMLDOM是一种特殊的DOM

它仅支持使用getElementById（）和getElementsByTagName（）两个方法来进行查询（请不要将IE私有的all（）方法混淆进来），而XMLDOM则可以与XPathAPI相结合，基于强大的正则表达式来进行查询。

（2）Ajax开发中所用到的主要是HTMLDOM

如果不涉及到处理XML格式的数据，就不需要用到XMLDOM。

以下所说的DOM也是指HTMLDOM。

3、在Web浏览器中编程DOM

（1）文档对象模型（DOM）是一种W3C标准

DOM也是一种跨语言的规范，换句话说，大多数主流编程语言都能使用它。

W3C为DOM定义了几种语言绑定。

一种语言绑定就是为特定语言定义的让您使用DOM的API。

比如，可以使用为C、Java和JavaScript定义的DOM语言绑定。

因此可以从这些语言中使用DOM。

（2）在Web浏览器中编程DOM的主要的语言

下面主要讨论JavaScript的DOM绑定，这是因为多数异步应用程序开发都需要编写在Web浏览器中运行的JavaScript代码。

使用JavaScript和DOM可以即时修改用户界面、响应用户事件和输入等等----而为了达到此目的，只需要使用完全标准的JavaScript。

（3）DOM技术被不同的浏览器所支持

DOM技术被InternetExplorer5.0及以上版本的浏览器所支持，它采取一种非常直观且一致的方式将HTML文档进行模型化处理，并借此提供访问、导航和操作页面的简易编程接口-----从而使得我们不仅能够访问和更新页面的内容及结构，而且还能操纵文档的风格样式。

由于DOM是由W3C组织所倡导，因此大多数浏览器都将最终支持这项技术。

4、DOM技术的主要作用

（1）DOM使得我们可以访问页面上的标准组件（元素、样式表、脚本、etc.）并处理它

Web浏览器使用对象属性可以非常容易地更改树的外观和结构，从而可以实现对页面中的元素进行局部修改。

（2）常规的实现技术

多年来，那些希望创建前端Web应用的程序员们都必须使用JavaApplet、Flash或者ActiveX。

当然现在这些工具还是可以使用的，但是支持DOM的浏览器使得Web开发人员拥有了创建多样化、功能强大的基于Web的应用程序的能力，而且完全使用基于标准的技术。

（3）在Ajax应用程序中或任何其他JavaScript中利用DOM所能够达到的效果

可以使用这些节点产生下列效果，比如移除元素及其内容，突出显示特定文本，或添加新图像元素。

因为都发生在客户端（运行在Web浏览器中的代码），所以这些效果立即发生，而不与服务器通信。

最终结果通常是应用程序感觉起来响应更快，因为当请求转向服务器时以及解释响应时，Web页面上的内容更改不会出现长时间的停顿。

5、DOM技术的工作原理

（1）DOM树

DOM将整个HTML文档展现为内存中的一棵树状结构（浏览器内存中仅仅只有一棵这样的HTMLDOM树，其根节点为document对象），每个元素、属性都是树上的一个节点------是根（Root）节点，、

Trees,trees,everywhere

Welcometoareallyboringpage.

（3）该页面所对应的树形结构

从根流出的线表示不同标记部分之间的关系。

head和body元素是html根元素的孩子；title是head的孩子，而文本“Trees,trees,everywhere”是title的孩子。

6、DOM树中的节点

（1）节点----DOM树中的任何事物都是节点

在DOM树中，基本上一切都是节点。

每个元素在最底层上都是DOM树中的节点。

每个属性都是节点。

每段文本都是节点。

甚至注释、特殊字符（如版权符号?

）、DOCTYPE声明（如果HTML或者XHTML中有的话）全都是节点。

（2）网页中最常用的元素标识方法----一般有三种

●ID--------表示给单个元素标识

●CLASS----用于给同类型的命名

●NAME----给一般元素命名

例如，可以在如下命名：

　　＜imgid="oneImageName"src=".."＞

　　＜spanname="moveText"＞＜/span＞

　　＜divclass="OneLayer"＞＜/div＞

　　当我们在JAVASCRIPT中调用这些元素时，就可以用document.all.oneImageName、document.all.moveText来识别了。

（3）对一类元素进行命名

●可以用CLASS来标识

一般情况下，一个名称只用于一个元素的命名，但也不完全如此，有时候同一类型的元素要同样的效果，不仅可以用CLASS来标识，还可以用ID或者NAME标识，引用时就可以对全部同样的ID和NAME一起操作了。

●如何识别其中的某一个元素

　　这种情况下的识别和单一命名识别的区别在于加上数字索引，如前面的pic也可以用document.all.oneImageName[1]来识别，其他的就按照它们在页面中出现的顺序来用相应的数字识别。

（4）DOM中的节点的类型

（5）DOM内部逻辑结构

●DOM文档中的逻辑结构可以用节点树的形式进行表述

通过对XML文件的解析处理，XML文件中的元素便转化为DOM文档中的节点对象。

●DOM的文档节点有Document、Element、Comment、Type等等节点类型，其中每一个DOM文档必须有一个Document节点，并且为节点树的根节点。

它可以有子节点，或者叶子节点如Text节点、Comment节点等。

●任何的格式良好的XML文件中的每一个元素均有DOM文档中的一个节点类型与之对应

利用DOM接口将XML文件转化成DOM文档后，就可以自由的处理XML文件了。

举例来说，属性结点总是和一个元素结点相关联，而用来封装元素的起始标记和结束标记中的文本是映射到一个文本结点的。

文本结点是元素结点的一个子节点。

所以，即使很简单的XML文件的表现也可能会需要很多种节点类型。

7、DOM与DHTML的不同

如果使用DHTML对象模型对文档的内容进行操纵，就必须了解相关文档元素的特殊属性和方法。

因为文档的元素有很多种，相应的属性和方法也就非常多，为了实现一个功能，开发人员不得不查询许多资料。

但是有了DOM技术，一切变得简单起来，那些操纵文档内容的属性和方法具备了元素无关性（element-independent）特点，这使得我们能够按照相同的步骤操纵文档内容。

毋庸置疑，DOM技术为开发人员在对象层次上操纵文档提供了最便捷的手段。

8、操作DOM：

可以通过JavaScript来访问这棵DOM树

从而遍历树上的节点、动态添加、删除树上的节点、设置或修改某个节点的样式、设置或修改某个节点中保存的数值等等。

通过JavaScript对于这棵DOM树所做的任何修改都会立即生效，JavaScript不能够控制浏览器重新呈现DOM树的时间。

因为浏览器重新呈现DOM树是一个非常耗时的操作，所以应该将做这种操作的次数尽量减到最少。

9、操作DOM所应该注意的问题

（1）所应该注意的问题之一：

DOM树上的每个节点都是一个非常庞大的对象

为了直观地了解DOM节点是如何庞大，可以使用MyEclipse中的DOM检查器任意打开一个DOM节点，其中属性的数量会让你大吃一惊，尤其是style数组中的属性数量。

（2）所应该注意的问题之二：

当动态创建的DOM节点不再使用时，一定要及时释放掉

就是将到它的引用全部设置为null，使其处于不可达的状态，以便垃圾回收器能够及时将其回收）。

如果没有及时释放不用的DOM节点，一段时间之后可能会造成惊人的内存泄漏。

（3）所应该注意的问题之三：

关于innerHTML这个属性并不是W3CDOM的标准属性

这个属性最初是IE的发明，但是开发者使用起来非常方便，于是成为了事实上的标准。

其他所有主流的浏览器也都支持这个属性，所以可以放心使用。

而outerHTML、innerText则只有IE支持，在开发跨浏览器的Ajax应用时，不应该使用这两个属性。

10、DOM主要的API说明

（1）Document对象

●它是对XML文档操作的起点

Document对象代表了整个XML的文档，所有其它的Node，都以一定的顺序包含在Document对象之内，排列成一个树形的结构，程序员可以通过遍历这颗树来得到XML文档的所有的内容，这也是对XML文档操作的起点。

●Document中所定义的各个方法一般是生产型方法

主要是用于创建可以插入到文档中的各种类型的节点。

常用的Document方法如下：

用Document.getDocumentElement（）方法可以得到一个Element类型的对象，它就是文档的根节点。

对于一个HTML文档，getDocumentElement（）方法得到的就是节点。

（2）DOM节点（Node类）

●下表是只读类型的属性

DOM对象属性

返回值

firstChild

返回一个对象（Object），表示第一个孩子节点（childnode）。

lastChild

返回一个对象（Object），表示最后一个孩子节点（childnode）。

nextSibling

返回一个对象（Object），表示下一个相邻的兄弟节点。

nodeName

返回节点对应的HTML标记。

比如：

P，Script。

对应文本项节点，返回#text。

nodeType

返回节点的类型，

1表示此节点是标记（tag），

2表示属性（attribute），

3表示文本项。

parentNode

返回一个对象（Object），表示当前节点的双亲节点（parentnode）。

previousSibling

返回一个对象（Object），表示前一个相邻的兄弟节点。

specified

返回一个布尔型变量（Boolean），表示是否设置了属性值（attribute）。

●下表是可读写类型的属性

DOM对象属性

返回值

data

返回一个字符串，表示文本项节点的值。

如果是其他类型节点，返回undefined。

nodeValue

返回一个字符串，表示文本项节点的值。

如果是其他类型节点，返回null。

●下表是DOM中相关属性集合

DOM对象属性

返回值

attributes

表示节点的属性集合，通过id来访问，比如attributes.id。

childNodes

表示节点的孩子节点集合，通过数组索引方式访问，比如：

childNodes[2]。

●Node类中的常用方法

（3）Element类中的方法

它代表的是XML文档中的标签元素，继承于Node，亦是Node的最主要的子对象。

在标签中可以包含有属性，因而Element对象中有存取其属性的方法，而任何Node中定义的方法，也可以用在Element对象上面进行使用。

注意

由于XML文档中的空白符也会被作为对象映射在DOM树中。

因而，直接调用Node方法的getChildNodes方法有时候会有些问题，有时不能够返回所期望的NodeList对象。

解决的办法是使用Element的getElementByTagName（String），返回的NodeLise就是所期待的对象了。

然后，可以用item（）方法提取想要的元素。

（4）DOM所提供的对象和方法---Attr对象

它代表了某个标签中的属性。

Attr继承于Node，但是因为Attr实际上是包含在Element中的，它并不能被看作是Element的子对象，因而在DOM中Attr并不是DOM树的一部分，所以Node中的getparentNode（），getpreviousSibling（）和getnextSibling（）等方法对Attr对象而言将返回的都将是null。

也就是说，Attr其实是被看作包含它的Element对象的一部分，它并不作为DOM树中单独的一个节点出现。

这一点在使用的时候要同其它的Node子对象相区别。

它所包含的主要的方法有：

createAttribute（String）：

用给定的属性名创建一个Attr对象，并可在其后使用setAttributeNode方法来放置在某一个Element对象上面。

应用DOM技术

1、使用DOM查找特定元素

（1）利用getElementById方法

例如，代码行varnumber=document.getElementById（"phone"）.value;使用DOM查找特定元素，然后检索该元素的值（在本例中是一个表单字段）。

（2）DOM代码中最常用的任务就是在页面的DOM树中导航

比方说，可以通过其"id"属性定位一个form，然后开始处理那个form中内嵌的元素和文本。

其中可能包含文字说明、输入字段的标签、真正的input元素，以及其他HTML元素（如img）和链接（a元素）。

（4）nodeName和nodeValue属性的特殊性

它们实际上并非适用于所有节点类型（节点的其他少数几个属性也是如此）。

这就说明了一个重要概念：

任何这些属性都可能返回空值（有时候在JavaScript中称为"未定义"）。

比方说，文本节点的nodeName属性是空值（或者在一些浏览器中称为"未定义"），因为文本节点没有名称。

如您所料，nodeValue返回节点的文本。

类似地，元素有nodeName，即元素名，但元素的nodeValue属性值总是空。

属性同时具有nodeName和nodeValue。

（5）所有节点都具有的方法

insertBefore（newChild,referenceNode）将newChild节点插入到referenceNode之前。

记住，应该对newChild的目标父节点调用该方法。

●replaceChild（newChild,oldChild）用newChild节点替换oldChild节点。

●removeChild（oldChild）从运行该方法的节点中删除oldChild节点。

●appendChild（newChild）将newChild添加到运行该函数的节点之中。

newChild被添加到目标节点孩子列表中的末端。

●hasChildNodes（）在调用该方法的节点有孩子时则返回true，否则返回false。

●hasAttributes（）在调用该方法的节点有属性时则返回true，否则返回false。

7、各种形式的节点----文档节点

（1）文档节点

基本上所有基于DOM的代码中都要用到的第一个节点类型是文档节点。

文档节点实际上并不是HTML（或XML）页面中的一个元素而是页面本身。

因此在HTMLWeb页面中，文档节点就是整个DOM树。

（2）在JavaScript中，可以使用关键字document访问文档节点

也可使用document对象创建新节点

createElement（elementName）使用给定的名称创建一个元素。

createTextNode（text）使用提供的文本创建一个新的文本节点。

createAttribute（attributeName）用提供的名称创建一个新属

（3）插入到特定的文档中

可以使用前面所述的方法如insertBefore（）或appendChild（）来完成这一步。

因此，可使用下面的代码创建新元素并将其添加到文档中：

varpElement=myDocument.createElement（"p"）;

vartext=myDocument.createTextNode（"Here'ssometextinapelement."）;

pElement.appendChild（text）;

bodyElement.appendChild（pElement）;

8、各种形式的节点----元素节点

（1）与属性处理有关的方法

元素节点虽然会大量使用元素节点，但很多需要对元素执行的操作都是所有节点共有的方法和属性，而不是元素特有的方法和属性。

元素只有两组专有的方法-----与属性处理有关的方法。

getAttribute（name）返回名为name的属性值。

removeAttribute（name）删除名为name的属性。

setAttribute（name,value）创建一个名为name的属性并将其值设为value。

getAttributeNode（name）返回名为name的属性节点（属性节点在下一节介绍）。

removeAttributeNode（node）删除与指定节点匹配的属性节点。

（2）与查找嵌套元素有关的方法

getElementsByTagName（elementName）返回具有指定名称的元素节点列表。

9、各种形式的节点----属性节点

（1）属性节点

DOM将属性表示成节点，可以通过元素的attributes来访问元素的属性，如下所示：

varimgElements=bodyElement.getElementsByTagName（"img"）;

for（i=0;i

{

varimgElement=imgElements.item[i];

varmsg="Foundanimgelement!

";

varatts=imgElement.attributes;

for（j=0;j

{

varatt=atts.item（j）;

msg=msg+"\n"+att.nodeName+":

'"+att.nodeValue+"'";

}

alert（msg）;

bodyElement.removeChild（imgElement）;

}

（2）主要的操作方法

getAttribute（name）返回名为name的属性值。

removeAttribute（name）删除名为name的属性。

setAttribute（name,value）创建一个名为name的属性并将其值设为value。

10、处理DOM树

（1）实时反映

如果向DOM树中增加一个元素，这个元素就会立即出现在用户的Web浏览器中--不需要重新加载页面。

从DOM树中删除一些文本，那些文本就会从用户屏幕上消失。

可以通过DOM修改用户界面或者与用户界面交互，这样就提供了很强的编程能力和灵活性。

（2）处理属性处理元素

比如可用document对象和上述方法创建一个新的img元素：

varimgElement=document.createElement（"img"）;

imgElement.setAttribute（"src","

imgElement.setAttribute（"width","130"）;

imgElement.setAttribute（"height","150"）;

bodyElement.appendChild（imgElement）;