10DOM模型与DOM API.docx

上传人:b****6 文档编号:8773024 上传时间:2023-02-01 格式:DOCX 页数:9 大小:64.76KB
下载 相关 举报
10DOM模型与DOM API.docx_第1页
第1页 / 共9页
10DOM模型与DOM API.docx_第2页
第2页 / 共9页
10DOM模型与DOM API.docx_第3页
第3页 / 共9页
10DOM模型与DOM API.docx_第4页
第4页 / 共9页
10DOM模型与DOM API.docx_第5页
第5页 / 共9页
点击查看更多>>
下载资源
资源描述

10DOM模型与DOM API.docx

《10DOM模型与DOM API.docx》由会员分享,可在线阅读,更多相关《10DOM模型与DOM API.docx(9页珍藏版)》请在冰豆网上搜索。

10DOM模型与DOM API.docx

10DOM模型与DOMAPI

DOM(DocumentObjectModel)被称作文档对象模型,它是语言和平台中立的接口,允许程序和脚本动态访问和更新文档的内容,结构和风格。

在AJAX中,DOM对于我们来说是HTML和XML文档的一个应用程序接口,它可以把HTML,XML与AJAX中的开发语言Javascript连接起来。

Javascript中的DOM实现可以使得我们在AJAX中通过Javascript代码对HTML和XML数据进行DOM方式的操作,从而做到页面的动态修改更新和数据的提取处理。

DOM与HTML:

html标签对应的是dom中的元素节点。

html中的文本内容都是dom中的文本节点。

html中的注释信息对应dom树中的注释节点。

html标签中的属性对应dom树的属性节点。

在DOM眼中,HTML是由很多不同类型的节点组成的,这些节点都属于NODE对象。

NODE对象有一个nodeType的属性可用于判断节点类型:

元素节点是HTML中最常见的节点,页面中的,,

都是元素节点。

属性节点表示的是一个元素节点的某个属性,例如中的value属性就可以被看作一个属性节点。

文本节点表示HTML页面中的一段文字信息,例如

HelloWorld
,其中的”HelloWorld”就是一个文本节点。

注释文本节点也比较好理解,HTML的注释信息,

—CommentMessage-->比如这样一段内容就是一个注释文本节点。

根节点顾名思义,表示的是HTML的根,在Javascript中有一个特殊的对象document,它可以表示HTML的根节点,后面我们会介绍这个特殊对象有很多在AJAX中非常常用的方法。

根节点的属性和方法:

属性:

documentElement表示文档的根元素节点。

在HTML文档中,它表示这个标签代表的元素节点

方法:

createAttribute()用指定名字创建新的Attr节点对象。

方法参数为属性的名字

createComment()用指定的字符串创建新的Comment节点对象。

方法参数为注释信息

createElement()用指定的标记名创建新的Element节点对象。

方法参数为节点标签的名字

createTextNode()用指定的文本创建新的文本节点对象。

方法参数为文本信息

getElementById()返回文档中具有指定id属性的Element节点。

方法参数为节点的id属性值

getElementsByTagName()以数组方式返回文档中具有指定标记名的所有Element节点,其顺序为在文档中出现的顺序。

标记名指的是像body,table这样的HTML标记名称。

方法参数为标记名称

Element节点对象的常用方法都是对节点属性的操作:

属性:

tagName元素的标记名字,例如

元素的标记名字为table。

HTML文档返回的标记名字均为大写。

方法:

getAttribute()以字符串形式返回指定属性的值。

方法参数为属性名称

getAttributeNode()以Attr节点对象的形式返回指定属性的值。

方法参数为属性名称

getElementsByTabName()以数组方式返回当前元素节点的子孙节点中中具有指定标记名的所有Element节点,其顺序为在文档中出现的顺序。

方法参数为节点的标记名

hasAttribute()如果该元素具有指定名字的属性,则返回true

removeAttribute()从Element节点中删除指定的属性。

方法参数为属性的名称

removeAttributeNode()从Element节点的属性列表中删除指定的Attr节点。

方法参数为属性的名称

setAttribute()把指定的属性设置为指定的字符串值,如果该属性不存在则添加一个新属性

方法的第一个参数为属性的名称。

方法的第二个参数为属性的值

setAttributeNode()把指定的Attr节点添加到该元素的属性列表中。

方法的参数为Attr节点对象

属性节点的属性:

name属性名

value属性值

Node对象的属性和方法如下所示:

属性:

attributes表示该节点的所有属性节点对象的数组

childNodes表示当前节点的子节点的数组。

如果没有子节点,则返回空数组

firstChild返回当前节点的第一个子节点。

如果没有子节点,则返回null

lastChild返回当前节点的最后一个子节点。

如果没有子节点,则返回null

nextSibling返回当前节点的下一个兄弟节点。

如果没有这样的节点,则返回null

previousSibling返回当前节点的上一个兄弟节点。

如果没有这样的节点则返回null

nodeName返回节点的名字,对于Element节点表示Element的标记名称

nodeType代表节点的类型

nodeValue代表节点的内容。

对于Text节点,nodeValue的值是文本内容。

对于注释节点,nodeValue的值是注释内容。

对于属性节点,nodeValue的值是属性值。

对于其他节点,nodeValue的值可能为null。

parentNode返回当前节点的父节点。

如果没有父节点,则返回null

方法:

appendChild()给当前节点增加一个子节点。

增加的子节点位于当前节点的所有子节点的末尾。

方法参数为Node对象。

cloneNode()复制当前节点,或者复制当前节点以及它的所有子孙节点。

方法参数为true或false。

True表示递归的复制所有子孙节点,false表示只复制当前节点。

hasChildNodes()如果当前节点拥有子节点,则返回true

insertBefore()插入一个节点,位置在当前节点的指定子节点之前。

如果该节点已经存在,则删除原节点后再插入新的节点。

如果指定子节点不存在,则执行效果和appendChild方法相同。

方法第一个参数是要插入的节点。

方法第二个参数是当前节点的指定子节点,新插入的节点位于这个节点之前。

removeChild()从文档树中删除并返回指定的子节点。

方法的参数是要删除的子节点

replaceChild()从文档树中删除并返回指定的子节点,用另一个节点替换它。

方法第一个参数是新的子节点。

方法第二个参数是被替换的子节点。

HTML的DOM中我们提到并大量使用了document这个Javascirpt的内置对象,请注意这个对象仅仅可以表示HTML的根节点。

而对于XML的DOM来说,每一个XML都一个根节点。

如果我们想建立一个节点的时候,也要使用XML的根节点来创建,这样才能保证新建的节点可以被添加到XML中,从而改变XML的内容。

functiontest(){

       varxml=loadXML(false,"123");

       varroot=xml.parentNode;

       varnode=root.createElement("book");

       vartext=root.createTextNode("abc");

       node.appendChild(text);

       xml.appendChild(node);

       alert(xml.lastChild.childNodes[0].nodeValue);

}

由于xml变量是根元素节点,因此我们用“xml.parentNode”就可以获得这个XML的根节点

然后我们用根节点新建元素和文本节点,并把他们加入到当前的XML中,最后通过alert语句来验证新的内容被加入到XML文档中。

什么是空白信息呢?

对于HTML来说,body的子孙节点中(请注意,并不是HTML页面中的所有位置都有这个空白信息的概念),如果两个元素节点之间有空格,回车这样的不包含任何文字信息的内容,那这些信息就都是空白信息(注意如果一段文字信息之中包含空格,回车,制表符,则这些不算是空白信息)

对于XML来说根节点的子孙节点中,如果两个元素节点之间有空格,回车这样的不包含任何文字信息的内容,那这些信息就都是空白信息。

在IE中,这些空白信息很没有地位

IE的DOM实现在解析HTML时,如果两个元素节点之间全是空白信息,则都会被过滤掉,如果两个元素节点之间既有空白信息又有文本信息,则文字信息之前的空白信息都会被过滤掉,文本信息之后的空白信息中空格制表符会被保留,换行符则被过滤

而IE的DOM实现在解析XML时,如果两个元素节点之间全是空白信息,则都会被过滤掉,如果两个元素节点之间既有空白信息又有文本信息,则空白信息都会被保留。

在FireFox中,这些空白信息则基本被一视同仁

FireFox的DOM实现在解析HTML时,如果两个元素节点之间全是空白信息,则都会被保留,如果两个元素节点之间既有空白信息又有文本信息,则文字信息之前的空白信息都会被过保留,文本信息之后的空白信息则都被过滤

FireFox的DOM实现在解析XML时会把这些空白信息都保留。

由于两个元素节点之间既有空白信息又有文本信息时我们无法确定其中的空白信息是否无用,因此我们只针对两个元素节点之前全部是空白信息的情况进行处理:

functionremoveBlank(xml)

{

if(xml.childNodes.length>1){

   for(varloopIndex=0;loopIndex

     varcurrentNode=xml.childNodes[loopIndex];

     if(currentNode.nodeType==1){

         removeBlank(currentNode);

       }

       if(((/^\s+$/.test(currentNode.nodeValue)))&&(currentNode.nodeType==3)){

       xml.removeChild(xml.childNodes[loopIndex--]);

       }

   }}

}

在Javascript中,一段正则表达式被放在两个”/”之间,通过/s$/.test(str)这样的语句就可以判断str中是否包含”s$”代表的正则表达式,如果包含则返回true。

/^\s+$/这个正则表达式的作用是判断字串的每一行中是否从开头到结尾包含一个或多个空格

getElementById方法在解析XML的时候是否适合呢?

首先XML中每一个元素节点不一定有id属性

其次XML中的两个元素节点可能有相同的id属性,这样getElementById这个方法就不再能保证找到我们需要的唯一节点了

因此这种方式并不适合XML的解析。

XPATH是什么?

全称是XMLPathLanguage(XML路径语言),适用于确定XML文档中某节点位置的语言。

我们可以把它当作类似于SQL一样的查询语言,通过给出XPTAH路径信息(就像SQL命令一样)就可以从XML中查找出符合条件的节点(就像从数据库中返回需要的数据一样)。

使用过DOM4j的人可能都知道可以利用其中的selectSingleNode和selectNodes方法直接给出XPATH地址来获取任意深度的一个或多个节点。

在IE6.0及其以后版本中我们可以使用同样的方式来访问任意深度的XML数据,这给XML数据的解析操作带来了便利。

但是在FireFox等浏览器中,则是使用了w3c标准的XPATH处理方式,没有IE这么简单的方式。

   Wang

   AJAXProfessional

   35

   Lee

   AJAXInAction

   65

   Zhu

   AJAXForDummies

   40

(1)所有的author节点

(2)获取所有isdn属性节点

(3)获取所有name节点中的文本内容

(4)有isdn属性的book节点

(5)获得子节点price值大于35且isdn等于0002的所有book节点

(6)获得子节点price值大于35或isdn等于0002的所有book节点

如果当前节点是根节点:

“book/author”

不管当前节点是什么都可以用:

”/books/book/author”或”//author”或”//book/author”

XPATH的路径即可以是相对路径,也可以是绝对路径。

当以”/”开头,则表示绝对路径方式,从根节点开始查找

如果不以”/”开头,则表示相对路径,这个时候相对的是我们前面的封装函数中的第一个参数所表示的节点对象。

注意,如果当前节点是某一个book节点,我们只能通过”author”找到这个book节点下的author节点。

如果以”//”开头,则直接找整个文档中符合条件的节点,不管这个节点在哪里,找到所有的author节点。

如果当前节点是根节点:

“book/@isdn”

不管当前节点是什么都可以用:

”/books/book/@isdn”或”//@isdn”或”//book/@isdn”

获取属性节点和获取元素节点在路径表示上是一样的,即可以用相对路径,也可以用绝对路径,还可以用”//”查找任意满足的节点。

不同之处是对于元素节点,直接用节点标签名表示,而属性节点则用@加上属性名来表示。

如果当前节点是根节点:

“book/name/text()”

不管当前节点是什么都可以用:

”/books/book/name/text()”或”//name/text()”或”//book/name/text()”

获取文本节点和前面两个在路径表示上也是一样的。

不同之处在于需要使用text()方法

如果当前节点是根节点:

“book[@isdn]”

不管当前节点是什么都可以用:

”/books/book[@isdn]”或”//book[@isdn]”如果当前节点是根节点:

“book[@isdn=’0002’][price>35]”

不管当前节点是什么都可以用:

”/books/book[@isdn=’0002’][price>40]”或”//book[@isdn=’0002’][price>40]”

在XPATH中可以在[]中指定条件,从而只获得满足某些条件的节点

比如需求(4)中我们期望获得包含isdn属性的book节点,就可以用[@isdn]来表示

对于需求(5),我们期望isdn属性是0002,而且book的price子节点的值大于40,对于前一个条件,可以使用[@isdn=’0002’],对于后一个条件可以使用[price>40],要同时满足两个条件,只要把这两个都写上就可以了。

如果当前节点是根节点:

“book[@isdn=’0002’]|book[price>35]”

不管当前节点是什么都可以用:

”/books/book[@isdn=’0002’]|/books/book[price>35]”或”//book[@isdn=’0002’]|//book[price>35]”

和(5)的需求不同之处是我们需要的不是与关系,而是或关系,这个时候我们可以使用”|”表示或关系,”|”可以同时连接多个XPATH路径。

这里需要注意的是这样返回的节点数组是不会有重复信息的,例如我们这个例子中price>35的节点有两个,其中一个满足isdn=’0002’这个条件,最后的返回结果中只有两个节点,而不会有三个节点。

DOM除了可以解析和修改XML以外,还可以从字符串或xml文件中加载XML,或者新建一个空的XML

XML的加载和上一节XPATH面临的问题一样,IE和FireFox中处理方式差异很大,因此为了使用方便,我们进行了封装

在IE的装载过程中,仍然使用了ActiveX对象来做工作

在IE中,新建了对象以后还需要设置使用同步方式装载文档,这和我们使用XMLHttpRequest的方式不同,当然如果你需要,也可以异步的装载文档,这个时候就需要像XMLHttpRequest对象一样设置onreadystatechange属性了。

IE中装载XML的对象提供了两个方法分别用于装载XML文件和包含XML的字符串。

最后我们返回的是XML文档的根元素节点。

如果在实际应用中需要返回根节点,只要将return的内容从xmlDoc.documentElement变成xmlDoc就可以了。

  

在FireFox的装载过程中,装载XML文件和装载XML字符串是不一样的。

如果需要装载XML文件,应该首先通过document.implementation.createDocument建立一个空文档,然后调用文档对象的load方法来装载。

而如果要装载XML字符串,则是需要建立一个DOMParser的对象,然后通过parseFromString方法进行装载,返回文档对象。

需要注意的是在FireFox中,只有装载XML文件才会需要设置同步方式装载文档,如果需要像XMLHttpRequest一样异步处理,就需要设置onload属性,而且FireFox中处理装载完成的情况和IE也不一样,不是XMLHttpRequest的那种需要判断readyState的方式,而是直接会执行onload属性对应的方法中的内容。

最后还有一点要说明的是,在IE和FireFox中装载XML文件时,会有和XMLHttpRequest对象一样的安全性限制,也就是不能访问跨域的XML数据。

由于通常情况下不会装载跨域的XML数据,因此这个问题不是很麻烦,如果却是有需要装载跨域XML数据,那么可以考虑使用前面解决XMLHttpReuqest对象跨域问题的思路来解决这个问题。

展开阅读全文
相关搜索

当前位置:首页 > 高等教育 > 农学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1