jsdocument.docx

jsdocument.docx

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

jsdocument

1首先，为什么要区分两个浏览器，其实不能说是两个，而是两种，一种是IE类的，一种是Firefox类的，在每个浏览器里面实现这个功能的方式不一样，所以要区分，而区分的方式就是用每一个浏览器的特征来区分，像if（window.activeXObject）就是用来判断是不是IE。

接下来，知道浏览器的区别后，要搞清楚，一下几个问题：

1.访问或者是操作XML文档，首先要创建DomDocument对象。

2.然后将XML文档或者是字符串装载到这个对象。

3.最后，用这个对象所带有的方法来实现相应的操作。

4.再提一下区分浏览器的问题

第一个，loadxmlwenjian.js

//JavaScriptDocument

/*

封装ie和firefox类浏览器中装载同域xml文件或xml字符串的方法，返回的是xml文档对应的DOM对象中的根元素节点

*/

functionloadxml（xmldoc）{

 if（window.ActiveXObject）{

  //IE浏览器

  varactiveNames=['MSXML2.DOMDocumnet.5.0','MSXML2.DOMDocumnet.4.0',   

              'MSXML2.DOMDocumnet.3.0','Microsoft.XmlDom'];  

//在ie下可以创建装载xml文档的空间名称

  varxmlobject;//创建出来的能够装载xml的对象

  for（vari=0;i

  try{

   xmlobject=newActiveXObject（activeNames[i]）;

   break;

 }

 catch（e）{}

  }

 if（xmlobject）{

  //如果创建成功，则利用这个对象进行xml文件或xml文档的装载

  //装载文件和字符串，ie又有不同的方法进行对应，下面进行判断

  xmlobject.async=false;//一般使用同步方式

  //装载xml的文件

  xmlobject.load（xmldoc）;

   returnxmlobject.xml;

   //returnxmlobject.documentElement;//返回根元素节点

  }

  else{

   alert（"装载文件的对象创建失败"）;

   returnnull;

   }

 }

elseif（document.implementation.createDocument）{

  //针对firefox类浏览器，也是两种不同的方式装载

  varxmlobject;

  //装载xml文件，需要先创建一个空的DOM对象，然后装载xml内容

     xmlobject=document.implementation.createDocument（"","",null）;//创建空的Dom对象

      if（xmlobject）{

      xmlobject.async=false;//同步方式装载

       xmlobject.load（xmldoc）;

    varser=newXMLSerializer（）;//序列化方式也与ie浏览器不同

    varxml=ser.serializeToString（xmlobject）;

        returnxml;

              }

             else{

               alert（"装载xml文档的对象创建失败"）;

              returnnull;

                }

  }

}

第二个，loadxml.html

functiontest（）{

 vardomxml1=loadxml（"test.xml"）;

alert（domxml1）;

}

第三个，test.xml文档：

xmlversion="1.0"encoding="gb2312"?

>

nihao456

      tiana

2Document对象在Dom中处于核心地位，其实我们把Dom树称为Document对象，在JavaScript中，document对象就是浏览器的内置对象，因此具有document对象的所有属性和方法。

Document对象是特殊的Node对象，但是对于Document来说我们更重要的是看重Document的方法。

document具有创建其他任何节点的能力，比如能够正常创建Element，TextNode，Attribute节点等，具体的方法如下：

F代表FireFox

属性

描述

IE

F

W3C

adoptNode（sourcenode）

从另一个文档向此文档选取一个节点，然后返回被选取的节点

Yes

createAttribute（name）

创建拥有指定名称的属性节点，并返回新的Attr对象。

6

1

Yes

createAttributeNS（uri,name）

创建拥有指定名称和命名空间的属性节点，并返回新的Attr对象。

Yes

createCDATASection（）

创建CDATA区段节点。

5

1

Yes

createComment（）

创建注释节点。

6

1

Yes

createDocumentFragment（）

创建空的DocumentFragment对象，并返回此对象。

5

1

Yes

createElement（）

创建元素节点。

5

1

Yes

createElementNS（）

创建带有指定命名空间的元素节点。

No

1

Yes

createEntityReference（name）

创建EntityReference对象，并返回此对象。

5

Yes

createProcessingInstruction

（target,data）

创建ProcessingInstruction对象，并返回此对象。

5

Yes

createTextNode（）

创建文本节点。

5

1

Yes

getElementById（id）

返回拥有带有给定值的ID属性的元素。

如果此元素不存在，则返回null。

5

1

Yes

getElementsByTagName_r（）

返回带有指定名称的所有元素的节点列表

5

1

Yes

getElementsByTagNameNS（）

返回带有指定名称和命名空间的所有元素的列表。

No

1

Yes

importNode（nodetoimport,deep）

从另一个文档把某个节点导入此文档。

此方法可创建源节点的一个新的副本。

如果deep参数被设置为true，那么会导入指定节点的所有子节点。

如果被设置为false，那么仅会导入节点本身。

此方法会返回被导入的节点。

Yes

normalizeDocument（）

Yes

renameNode（）

重命名元素或者属性节点。

Yes

在上面表中粉红色的方法，是使用频率比较高的，在学习中这些方法记住就可以了，因为我们不可能记住所有的方法，其他的方法使用的时候再去查询。

具体用户一JavaScript为例给以说明：

创建一个元素

createElement（）方法可创建一个新的元素节点。

下面的代码片段可创建一个元素（），并可把它添加到每个元素的最后一个子元素之后：

JavaScript的语法：

xmlDoc=loadXMLDoc（"books.xml"）;

varx=xmlDoc.getElementsByTagName_r（'book'）;

varnewel

for（i=0;i

{

 newel=xmlDoc.createElement（'edition'）;

 x[i].appendChild（newel）;

}

当然JavaScript中的document对象具有这些方法，可以创建Html中的Element

创建一个属性

createAttribute（）可创建一个新的属性节点。

下面的代码片段可创建一个"edition"属性，并可把它添加到所有的元素中：

xmlDoc=loadXMLDoc（"books.xml"）;

varx=xmlDoc.getElementsByTagName_r（'book'）;

varnewatt;

for（i=0;i

{

 newatt=xmlDoc.createAttribute（"edition"）;

 newatt.value="first";

 x[i].setAttributeNode（newatt）;

}

当然JavaScript中document对属性操作非常简单，由于JavaScript中的任何对象都是动态的，JavaScript

中的对象可以任何时刻，使用

   对象.属性=属性。

这样的语法添加值。

比如：

  varmydiv=document.CreateElement（"div"）;

  mydiv.bgColor="#8080FF";

创建一个文本节点

createTextNode（）方法可创建一个新的文本节点。

下面的代码片段可创建一个元素（），其中带有一个文本节点（'First'），并可把此元素添加到每

一个元素的最后一个子元素之后：

xmlDoc=loadXMLDoc（"books.xml"）;

varx=xmlDoc.getElementsByTagName_r（'book'）;

varnewel,newtext

for（i=0;i

{

 newel=xmlDoc.createElement（'edition'）;

 newtext=xmlDoc.createTextNode（'First'）;

 newel.appendChild（newtext）;

 x[i].appendChild（newel）;

}

创建一个CDATASection节点

createCDATASection（）方法可创建一个新的CDATASection节点。

下面的代码片段可创建一个CDATAsection，并可把它添加到每一个元素的最后一个子元素之后：

xmlDoc=loadXMLDoc（"books.xml"）;

varx=xmlDoc.getElementsByTagName_r（'book'）;

varnewCDATA,newtext;

newtext="SpecialOffer&BookSale";

for（i=0;i

{

 newCDATA=xmlDoc.createCDATASection（newtext）;

 x[i].appendChild（newCDATA）;

}

创建一个注释节点

createComment（）方法可创建一个新的注释节点。

下面的代码片段可创建一个注释节点，并可把它添加到每一个元素的最后一个子元素之后：

xmlDoc=loadXMLDoc（"books.xml"）;

varx=xmlDoc.getElementsByTagName_r（'book'）;

varnewComment,newtext;

newtext="RevisedSeptember2006";

for（i=0;i

{

 newComment=xmlDoc.createComment（newtext）;

 x[i].appendChild（newComment）;

}

3由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：

Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：

Js代码

1.Node.ELEMENT_NODE 

（1）  

2.Node.ATTRIBUTE_NODE 

（2）  

3.Node.TEXT_NODE （3） //

[CDATA[ ]]>中括着的纯文本，它没有子节点  

4.Node.CDATA_SECTION_NODE （4） //子节点一定为TextNode  

5.Node.ENTITY_REFERENCE_NODE （5）   

6.Node.ENTITY_NODE （6） //DTD中的实体定义

ENTITY foo “foo”>，无子节点  

7.Node.PROCESSING_INSTRUCTION_NODE （7） //PI，无子节点  

8.Node.COMMENT_NODE （8）  

9.Node.DOCUMENT_NODE （9） //最外层的Root element,包括所有其它节点  

10.Node.DOCUMENT_TYPE_NODE （10） //DTD，

DOCTYPE………..>  

11.Node.DOCUMENT_FRAGMENT_NODE （11）  

12.Node.NOTATION_NODE （12） //DTD中的Nation定义   

Node.ELEMENT_NODE

（1）

Node.ATTRIBUTE_NODE

（2）

Node.TEXT_NODE（3）//

[CDATA[]]>中括着的纯文本，它没有子节点

Node.CDATA_SECTION_NODE（4）//子节点一定为TextNode

Node.ENTITY_REFERENCE_NODE（5）

Node.ENTITY_NODE（6）//DTD中的实体定义

ENTITYfoo“foo”>，无子节点

Node.PROCESSING_INSTRUCTION_NODE（7）//PI，无子节点

Node.COMMENT_NODE（8）

Node.DOCUMENT_NODE（9）//最外层的Rootelement,包括所有其它节点

Node.DOCUMENT_TYPE_NODE（10）//DTD，

DOCTYPE………..>

Node.DOCUMENT_FRAGMENT_NODE（11）

Node.NOTATION_NODE（12）//DTD中的Nation定义

❑Node接口包含的特性/方法

节点的属性

nodeName属性将返回一个字符串，其内容是给定节点的名字。

如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text的字符串；

nodeType属性将返回一个整数，这个数值代表给定节点的类型

nodeValue属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；

ownerDocument指向这个节点所属的文档

attributes包哈勒代表一个元素的特性的Attr对象；仅用于Element节点

childNodes所有子节点的列表

firstChild指向在childNodes列表中的第一个节点

lastChild指向在childNodes列表中的最后一个节点

nextSibling指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null

previousSibling指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null

parentNode返回一个给定节点的父节点

❑hasChildNodes（）当childNodes包含一个或多个节点时，返回真

❑appendChild（node）将node添加到childNodes的末尾

❑removeChild（node）将node从childNodes中删除

❑insertBefore（newnoderefnode）在childNodes中的refnode之前插入newnode

Js代码

1.var container = document.getElementById（"content"）;  

2.var message = document.getElementById（"fineprint"）;  

3.var para = document.createElement（"p"）;  

4.container.insertBefore（para,message）;  

varcontainer=document.getElementById（"content"）;

varmessage=document.getElementById（"fineprint"）;

varpara=document.createElement（"p"）;

container.insertBefore（para,message）;

 ❑replaceChild（newnode,oldnode）将childNodes中的oldnode替换成newnode

Js代码

1.var container = document.getElementById（"content"）;  

2.var message = document.getElementById（"fineprint"）;  

3.var para = document.createElement（"p"）;  

4.container.replaceChild（para,message）;  

varcontainer=document.getElementById（"content"）;

varmessage=document.getElementById（"fineprint"）;

varpara=document.createElement（"p"）;

container.replaceChild（para,message）;

 ❑获得Node：

Js代码

1./* 通过document对象 */  

2.var oHtml = document.documentElement;  

3.  

4.  

5./* 得到和 */  

6.var oHead = oHtml.firstChild;  

7.var oBody = oHtml.lastChild;  

8./* 可以用这种方式 */  

9.var oHead = oHtml.childNodes[0];  

10.var oBody = oHtml.childNodes[1];  

11./* 也可以使用方法获取数组的索引值 */  

12.var oHead = oHtml.childNodes.item（0）;  

13.var oBody = oHtml.childNodes.item

（1）;  

14./* 使用document.body来得到 */  

15.var oBody = document.body;  

/*通过document对象*/

varoHtml=document.documentElement;

/*得到和*/

varoHead=oHtml.firstChild;

varoBody=oHtml.lastChild;

/*可以用这种方式*/

varoHead=oHtml.childNodes[0];

varoBody=oHtml.childNodes[1];

/*也可以使用方法获取数组的索引值*/

varoHead=oHtml.childNodes.item（0）;

varoBody=oHtml.childNodes.item

（1）;

/*使用document.body来得到*/

varoBody=document.body;

❑createElement（element）

创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。

eg）varpara=document.createElement（"p"）;

document.body.appendChild（para）;

❑createTextNode（）

创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：

reference=document.createTextNode（）

参数为新建文本节点所包含的文本字符串

Js代码

1.var message = document.createTextNode（"hello world"）;  

2.var container = document.createElement（"p"）;  

3.container.appendChild（message）;  

4.document.body.appendChild（container）;  

varmessage=document.createTextNode（"helloworld"）;

varcontainer=document.createElement（"p"）;

container.appendChild（message）;

document.body.