第13章DOM模型.docx

第13章DOM模型.docx

《第13章DOM模型.docx》由会员分享，可在线阅读，更多相关《第13章DOM模型.docx（17页珍藏版）》请在冰点文库上搜索。

第13章DOM模型

第13章DOM模型

DOM是DocumentObjectModel文档对象模型的缩写。

DOM是一种与浏览器、平台、语言无关的接口，通过DOM可以访问页面其他标准组件。

DOM解决了Netscape和Microsoft的JavaScript之间的冲突，给予web设计师和开发者一个标准的方法，以让他们来访问他们站点的数据、脚本和表现层对象。

本章将介绍DOM结构模型、如何遍历DOM、等待HTMLDOM的加载、在HTML文档中查找元素、处理DOM中的结点等。

13.1DOM简介

DOM模型的全称是文档对象模型。

DOM定义了操作文档对象的接口，在该模型中，文档被看成是结构化的数据，对于XML就像是一棵树的结构，树种的每个结点对应一个XML标记，都是一个对象。

如，网页中的HTML文档是一个根节点，链接、图片、表单等子对象都是树叶。

DOM是以层次结构组织的节点或信息片段的集合。

该层次结构允许开发人员在树中导航寻找特定信息。

分析该结构通常需要加载整个文档和构造层次结构。

由于DOM是基于信息层次的，因而它被认为是基于树的。

但是事实上，DOM模型更多表现为一个对象模型，不依赖于结构，树状结构是该模型的一个实现。

它规定了每个对象的接口。

在Ajax应用中，通过这些接口来改变文档状态，以达到页面动态显示的目的。

DOM模型一般包括3个部分：

核心、HTML以及XML。

核心部分包括了最底层的文档操作接口，适用于HTML和XML；HTML部分包括针对HTML的操作接口；XML部分定义了针对XML的操作接口。

注意：

XMLDOM主要用于XML的标准对象模型和标准编程接口。

XMLDOM是用于获取、更改、添加或删除XML元素的标准。

DOM模型是从DHTML开始的。

Netscape的浏览器开始就引进了document对象、form对象、text对象等，这是最初的DHTML模型。

后来又添加Image对象，并得到了包含IE浏览器在内的其他浏览器的支持。

后来的浏览器又支持了layer标记和相应的层对象等。

为此万维网联盟（W3C）指定了1级文档模型，即DOMLevel1。

之后DOMLevel2，DOMLevel2模型相继出现。

DOM是一个应用程序接口。

从DOMLevel1开始，DOM就包含了一些接口，用于表示从XML文档中找到不同类型的信息，也包含了使用这些对象所必须的方法和属性。

DOMLevel1包括对XML1.0和HTML的支持。

DOMLevel2提供对XML命名空间的支持，允许开发人员检测和使用可是由于某个节点的命名空间信息，还支持级联样式表、事件和增强的树操作。

DOMLevel3还包括了对创建Document对象更好的支持，以及用来处理文档加载和保持、验证等模块等。

13.2DOM结构模型

DOM模型是以层次结构来组织节点或信息片段的，本节将讲解DOM中的文档层次结构，以及结构的类型等。

13.2.1DOM中的文档层次结构

DOM模型中，HTML文档是以树形结构存在的，树的根节点是document对象，用来表示整个文档对象，document对象仅包含一个子节点。

示例13-1表示的是一个简单HTML文档层次结构。

【示例13-1】HTML文档层次结构

DOM中的文档层次结构

其中document是根节点，是document的子节点，和两个节点又是的子节点，节点又包括了

/*创建3个表单*/

/*名为form2的表单*/

/*名为form3的表单*/

/*输出表单的长度*/

document.write（"该文档包括了:

"+document.forms.length+"个表单。

"）

代码说明：

❑该程序首先创建3个表单元素，分别为form1，form2以及form3。

❑然后使用document.forms.length输出文档对象中表单元素的长度。

该程序执行效果如图13-2所示。

图13-2计算文档对象中表单数目

13.3.2XMLDOM

XMLDOM是即是用于XML的标准对象模型，又是用于XML的标准编程接口，其独立于平台和语言，是W3C推荐的标准。

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

DOM这样规定：

❑整个XML文档是一个文档节点；

❑每个XML标签是一个元素节点；

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

❑每个XML属性是一个属性节点；

❑XML文档中的注释属于注释节点。

示例13-3是一个关于书店中书籍信息的XML文档。

【示例13-3】书籍信息

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

>

javascript

陆华兴

2008

50

6级英语

王长喜

2005

25

高数

曹力

2005

39

代码说明：

❑在XML文档中，根节点是，文档中的所有其他节点都被包括在里；

❑根节点有3个节点；

❑第一个节点有4个节点：

helloworld

varp1=document.getElementById（"p1"）;

p1.innerHTML="textchanged!

";

代码说明：

❑将

标记的id属性指定为“p1”，在文档载入完成后使用document.getElementById（“p1”）语句获取对该p1节点的引用。

❑IE浏览器可以直接使用id名称引用该节点。

❑代码varp1=document.getElementById（"p1"）也不是必须的，这种用法不被其他浏览器所支持。

注意：

getElementById（）方法无法在XML中工作。

在XML文档中，必须通过拥有类型id的属性来进行搜索，而该必须在XMLDTD中进行声明。

2．使用getElementsByTagName（）方法引用指定节点

该方法用来获取指定标记的元素节点的集合，返回一个数组，这些节点是使用此方法所处节点的子节点。

【示例13-7】getElementsByTagName（）方法

helloworld

Iamsea

--

varpnumber=document.getElementsByTagName（"p"）;

for（vari=0;i

{

pnumber[i].innerHTML="coloryellow";

}

//-->

该段代码获取了所有标记为p的节点，并改变其innerHTML属性。

13.6.2间接引用

在DOM模型中，除了通过直接指定一个节点的特性来引用该节点，还可以通过节点间的关系来引用相对节点。

1．引用子节点

每个节点都有一个childNodes集合属性，其类型是数组对象，用来表示该节点的所有子节点的集合。

这些子节点按顺序排列，因此可通过索引来依次访问各子节点。

如可用document.childNodes[0]来引用HTML文档的根节点。

除了childNodes属性之外，还有两个用于引用子节点的属性。

分别是：

element.firstChild和element.lastChild。

firstChild表示第一个子节点，lastChild表示最后一个子节点，分别对应于：

elent.ChildNodes[0]和element.ChildNodes[element.childNodes.length-1];

2．引用父节点

除根节点只有一个父节点之外，其他节点都仅有一个父节点，可用parentNode来引用。

parentNode属性通常被用来改变文档的结构。

使用parentNode的语法如下：

element.parentNode;

3．引用兄弟节点

两个节点如果属于同一个文档层次，那么这两个节点称为兄弟节点。

兄弟节点之间的相互引用是通过两个属性来进行的，这两个属性是：

element.nextSibling;//引用上一兄弟节点

element.previousSibling;//引用下一兄弟节点

注意：

如果一个节点没有相应的兄弟节点，则属性返回null。

13.6.3获取节点信息

在获得对一个节点的引用之后，DOM模型还提供了一些方法来获得该节点的信息。

这些方法有nodeName，nodeType，nodeValue，hasChildNodes（）等。

1．nodeName

nodeName属性用来获取节点的名称。

其语法如下：

Node.nodeName;

nodeName的返回值会因为不同的节点类型而有差异。

如果节点类型是：

❑元素节点，返回标记的名称，如返回“p”；

❑文本节点，返回文本的内容；

❑属性节点，返回属性的名称，如id=”p1”则返回“p”。

2．nodeType

使用nodeType属性来获取节点类型。

其语法如下：

Node.nodeType；

DOM模型中的节点共有3种类型，nodeType以数字形式返回它们的类型：

❑元素节点则返回1；

❑属性节点则返回2；

❑文本节点则返回3。

3．nodeValue

DOM模型中的节点使用nodeValue属性来获取节点的值。

其语法如下：

Node.nodeValue;

对于不同类型的节点有不同的返回值：

❑元素节点则返回null；

❑属性节点则返回undefined；

❑文本节点则返回文本内容。

4．hasChildNodes

使用该方法来判断给定节点是否有子节点。

其语法如下：

Node.hasChildNodes（）；

该方法返回节点是否有子节点，如果有就返回true，反之如果没有就返回false。

5．tagName

使用tagName属性来返回元素节点的标记名称。

该属性是元素节点独有属性，和nodeName具有相同的返回值。

13.6.4处理属性和文本节点

DOM模型中的属性节点比较特殊，其依赖于元素节点而存在。

1．获取和设置属性节点的值

每一个属性节点都是元素节点的一个属性。

其访问方法为：

元素节点。

属性名称；

2．setAttribute（）方法

setAttribute（）方法用来添加一个属性，是DOM标准推荐的方法。

该方法的原型如下：

elementNode.setAttribute（attributeName,attributeValue）;

其中：

❑elementNode是要添加属性的节点；

❑attributeName是要添加属性的名称；

❑attributeValue是属性的值。

3．getAttribute（）方法

getAttribute（）方法用来获取属性的值，也是DOM标准推荐的方法。

该方法原型如下：

elementNode.getAttribute（attributeName）;

其中：

❑elementNode是要获取属性的节点；

❑attributeName是要获取值属性的名称。

13.6.5改变节点内容

通常通过使用innerHTML属性来获取一个节点内的文本，如上文所提到的代码片段：

helloworld

可以用如下JavaScript代码来获取文本的值：

document.getElementById（“p1”）.innerHTML;

通常情况下，必须使用文本节点来获取一段文本，如：

对于

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

第13章 DOM模型 13 DOM 模型

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。