dom资料.docx

dom资料.docx

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

dom资料

∙W3CDOM模型用法详解

W3CDOM

DOM=DocumentObjectModel，文档对象模型，DOM模型可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。

换句话说，这是表示和处理一个HTML或XML文档的常用方法。

有一点很重要，DOM模型的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。

最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM模型的应用已经远远超出这个范围。

DOM模型实际上是以面向对象方式描述的对象模型。

DOM模型定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

可以把DOM模型认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

DOM模型

根据W3CDOM模型规范，DOM模型是HTML与XML的应用编程接口（API），DOM模型将整个页面映射为一个由层次节点组成的文件。

有1级、2级、3级共3个级别。

1级DOM模型在1998年10月份成为W3C的提议，由DOM模型核心与DOM模型HTML两个模块组成。

DOM模型核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。

DOM模型HTML通过添加HTML专用的对象与函数对DOM模型核心进行了扩展。

    鉴于1级DOM模型仅以映射文档结构为目标，DOM模型2级面向更为宽广。

通过对原有DOM模型的扩展，2级DOM模型通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM模型文档）和层叠样式表（CSS）的支持。

同时也对DOM模型1的核心进行了扩展，从而可支持XML命名空间。

2级DOM模型引进了几个新DOM模型模块来处理新的接口类型：

DOM视图：

描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；

DOM事件：

描述事件接口；

DOM样式：

描述处理基于CSS样式的接口；

DOM遍历与范围：

描述遍历和操作文档树的接口；

3级DOM模型通过引入统一方式载入和保存文档和文档验证方法对DOM模型进行进一步扩展，DOM模型3包含一个名为“DOM模型载入与保存”的新模块，DOM模型核心扩展后可支持XML1.0的所有内容，包扩XMLInfoset、XPath、和XMLBase。

XMLDOM节点

XML文档中的每个成分都是一个节点。

节点

根据DOM，XML文档中的每个成分都是一个节点。

DOM是这样规定的：

∙整个文档是一个文档节点

∙每个XML标签是一个元素节点

∙包含在XML元素中的文本是文本节点

∙每一个XML属性是一个属性节点

∙注释属于注释节点

DOM实例

请看下面的XML文件（books.xml）：

xmlversion="1.0"encoding="ISO-8859-1"?

>

HarryPotter

JK.Rowling

2005

29.99

EverydayItalian

GiadaDeLaurentiis

2005

30.00

LearningXML

ErikT.Ray

2003

39.95

XQueryKickStart

JamesMcGovern

PerBothner

KurtCagle

JamesLinn

VaidyanathanNagarajan

2003

49.99

在上面的XML中，根节点是。

文档中的所有其他节点都被包含在中。

根节点有四个节点。

第一个节点有四个节点：

JK.Rowling

2005

29.99

在上面的XML中，";

text=text+"JK.Rowling";

text=text+"2005";

text=text+"";

text=text+"";

try//InternetExplorer

{

xmlDoc=newActiveXObject（"Microsoft.XMLDOM"）;

xmlDoc.async="false";

xmlDoc.loadXML（text）;

}

catch（e）

{

try//Firefox,Mozilla,Opera,etc.

{

parser=newDOMParser（）;

xmlDoc=parser.parseFromString（text,"text/xml"）;

}

catch（e）{alert（e.message）}

}

document.write（"xmlDocisloaded,readyforuse"）;

XMLDOM加载函数

加载函数

XMLDOM含有遍历XML树以及访问、插入、删除节点的方法（函数）。

然后，在访问并处理XML文档之前，必须把它载入XMLDOM对象。

上一节演示了如何加载XML文档。

为了避免因加载文档而重复编写代码，可以把代码存储在一个单独的JavaScript文件中：

functionloadXMLDoc（dname）

{

try//InternetExplorer

{

xmlDoc=newActiveXObject（"Microsoft.XMLDOM"）;

}

catch（e）

{

try//Firefox,Mozilla,Opera,etc.

{

xmlDoc=document.implementation.createDocument（"","",null）;

}

catch（e）{alert（e.message）}

}

try

{

xmlDoc.async=false;

xmlDoc.load（dname）;

return（xmlDoc）;

}

catch（e）{alert（e.message）}

return（null）;

}

上面的函数存储在名为"loadxmldoc.js"的文件中。

下面的例子在其部分有一个指向"loadxmldoc.js"的链接，并使用loadXMLDoc（）函数加载XML文档（"books.xml"）：

xmlDoc=loadXMLDoc（"books.xml"）;

document.write（"xmlDocisloaded,readyforuse"）;

XMLDOM-属性和方法

属性和方法向XMLDOM定义了编程接口。

实例

下面的例子使用XML文件books.xml。

函数loadXMLDoc（），位于外部JavaScript中，用于加载XML文件。

函数loadXMLString（），位于外部JavaScript中，用于加载XML字符串。

加载并解析XML文件

加载并解析XML字符串

编程接口

DOM把XML模拟为一系列节点接口。

可通过JavaScript或其他编程语言来访问节点。

在本教程中，我们使用JavaScript。

对DOM的编程接口是通过一套标准的属性和方法来定义的。

属性经常按照“某事物是什么”的方式来使用（例如节点名是"book"）。

方法经常按照“对某事物做什么”的方式来使用（例如删除"book"节点）。

XMLDOM属性

一些典型的DOM属性：

∙x.nodeName-x的名称

∙x.nodeValue-x的值

∙x.parentNode-x的父节点

∙x.childNodes-x的子节点

∙x.attributes-x的属性节点

注释：

在上面的列表中，x是一个节点对象。

XMLDOM方法

∙x.getElementsByTagName（name）-获取带有指定标签名称的所有元素

∙x.appendChild（node）-向x插入子节点

∙x.removeChild（node）-从x删除子节点

注释：

在上面的列表中，x是一个节点对象。

实例

从books.xml中的";

text=text+"JK.Rowling";

text=text+"2005";

text=text+"";

text=text+"";

xmlDoc=loadXMLString（text）;

document.write（xmlDoc.getElementsByTagName（"title"）

[0].childNodes[0].nodeValue）;

document.write（"
"）;

document.write（xmlDoc.getElementsByTagName（"author"）

[0].childNodes[0].nodeValue）;

document.write（"
"）;

document.write（xmlDoc.getElementsByTagName（"year"）

[0].childNodes[0].nodeValue）;

输出：

HarryPotter

JK.Rowling

2005

XMLDOM访问节点

访问节点

您可以通过三种方法来访问节点：

1.通过使用getElementsByTagName（）方法

2.通过循环（遍历）节点树

3.通过利用节点的关系在节点树中导航

getElementsByTagName（）方法

getElementsByTagName（）返回拥有指定标签名的所有元素。

语法

node.getElementsByTagName（"tagname"）;

实例

下面的例子返回x元素下的所有