DOM(二)——XML DOM

简介:

XMLExtensible Markup Language)可扩展标记语言(可以通过这篇博客简单了解XML基础介绍),DOMDocument ObjectModel)文档对象模型(通过上篇博客了解DOM(一)——HTML DOM)。非常明显,XML DOM就是文档类型模型针对XML做的一些操作。是和HTMLDOM共同合作来完成网页数据的动态改变显示等问题!和XML DOM有很多相似的地方,但是基于XMLHTML的区别,他们的一些操作还是有很大不同的。来看一下JavaScript通过DOMXML的操作相关知识。


        DOMXML中关于节点,属性,方法等的概念,知识都是非常相似的,这里不再赘述,这里重点通过几个实例运用一下!


      我们先引进一个XML文件books.xml,以后操作都在它上进行:(注意观察XMLHTML的不同处和相同处)


[html] view plain copy print?

  1. <span style="font-size:18px;"><?xml version="1.0" encoding="ISO-8859-1"?>  

  2. <bookstore>  

  3. <book category="children">  

  4.   <title lang="en">Harry Potter</title>   

  5.   <author>J K. Rowling</author>   

  6.   <year>2005</year>   

  7.   <price>29.99</price>   

  8. </book>  

  9. <book category="cooking">  

  10.   <title lang="en">Everyday Italian</title>   

  11.   <author>Giada De Laurentiis</author>   

  12.   <year>2005</year>   

  13.   <price>30.00</price>   

  14. </book>  

  15. <book category="web">  

  16.   <title lang="en">Learning XML</title>   

  17.   <author>Erik T. Ray</author>   

  18.   <year>2003</year>   

  19.   <price>39.95</price>   

  20. </book>  

  21. <book category="web">  

  22.   <title lang="en">XQuery Kick Start</title>   

  23.   <author>James McGovern</author>   

  24.   <author>Per Bothner</author>   

  25.   <author>Kurt Cagle</author>   

  26.   <author>James Linn</author>   

  27.   <author>Vaidyanathan Nagarajan</author>   

  28.   <year>2003</year>   

  29.   <price>49.99</price>   

  30. </book>  

  31. </bookstore>  

  32. </span>  



    一,解析XML文件,大多数浏览器都内建了读取和操作XML的解析器,通过解析器把XML转换为JavaScript可存取的对象。但是这里的以IE为内核的和FireFox或其他的浏览器是不同的,这里看个全面的加载解析XML文件的例子:(以上边books.xml进行实验)


[javascript] view plain copy print?

  1. <span style="font-size:18px;"><html>  

  2.     <body>  

  3.         <script type="text/javascript">  

  4.             try //Internet Explorer  

  5.               {  

  6.                       xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//创建IE浏览器的XML文档对象  

  7.               }  

  8.             catch(e)  

  9.               {  

  10.                   try //Firefox, Mozilla, Opera, etc.  

  11.                     {  

  12.                           xmlDoc=document.implementation.createDocument("","",null);//创建空的XML文档对象   

  13.                     }  

  14.                   catch(e) {alert(e.message)}  

  15.                }  

  16.             try   

  17.               {  

  18.                   xmlDoc.async=false;//关闭异步加载,这样可确保在文档完整加载之前,解析器不会继续执行脚本   

  19.                   xmlDoc.load("/books.xml");//加载books.xml文件。注意:loadXML() 方法用于加载字符串(文本),而 load() 用于加载文件   

  20.                   document.write("xmlDoc is loaded, ready for use");//表明创建成功  

  21.               }  

  22.             catch(e) {alert(e.message)}//创建失败,给出信息提示  

  23.         </script>  

  24.     </body>  

  25. </html>  

  26. </span>  


    二,主要是对节点的各种操作了,主要就是一些属性和方法的使用,这里先看一下典型最常用的属性和方法:

 

XML DOM典型属性

XML DOM常见方法

一些典型的 DOM属性:

  • x.nodeName - x的名称

  • x.nodeValue - x的值

  • x.parentNode - x的父节点

  • x.childNodes - x的子节点

  • x.attributes - x的属性节点

    • x.getElementsByTagName(name) -获取带有指定标签名称的所有元素

    • x.appendChild(node) - x插入子节点

    • x.removeChild(node) - x删除子节点

 

   更多的详细请看,非常详细:xmldom属性与方法详解


        1,首先看一下节点的访问:可以通过三种方法(和HTML区别很大):

  1. 通过使用 getElementsByTagName()方法

  2. 通过循环(遍历)节点树

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

         由于XML的内容量要比HTML文件的量小的多,可以通过b,c两种方法,HTML也可以,但是效率是非常差的(一般不用)。下边看一个循环节点树的实例:


[javascript] view plain copy print?

  1. <span style="font-size:18px;"><html>  

  2.     <head>  

  3.                  <script type="text/javascript" src="/example/xdom/loadxmldoc.js"></script>  

  4.     </head>  

  5.     <body>  

  6.       

  7.         <script type="text/javascript">  

  8.             xmlDoc=loadXMLDoc("/example/xdom/books.xml");  

  9.               

  10.             x=xmlDoc.documentElement.childNodes;//获得第一个book元素的子节点  

  11.             for (i=0;i<x.length;i++)//循环  

  12.             {   

  13.             if (x[i].nodeType==1)//检查其节点类型是否为元素节点(节点类型和HTML DOM中一样)  

  14.               {//Process only element nodes (type 1)   

  15.               document.write(x[i].nodeName);//输出元素节点  

  16.               document.write("<br />");  

  17.               }   

  18.             }  

  19.         </script>  

  20.     </body>  

  21. </html>  

  22. </span>  



         2,改变节点的的属性值可以通过nodeValue,setAttribute(),HTML基本一样,比较简单。对于节点的删除,替换,创建,添加等,都是相似了,只要我们使用对应的方法或者属性即可完成,这里仅仅看了一个改变节点属性的例子:


[javascript] view plain copy print?

  1. <span style="font-size:18px;"><html>  

  2.     <head>  

  3.         <script type="text/javascript" src="/example/xdom/loadxmldoc.js">   

  4.         </script>  

  5.     </head>  

  6.     <body>  

  7.       

  8.         <script type="text/javascript">  

  9.             xmlDoc=loadXMLDoc("/example/xdom/books.xml");  

  10.               

  11.             x=xmlDoc.getElementsByTagName("book")[0]  

  12.             y=x.getAttributeNode("category");  

  13.             y.nodeValue="child";  

  14.               

  15.             document.write(y.nodeValue);  

  16.         </script>  

  17.         </body>  

  18. </html>  

  19. </span>  



         3,这里我单独出来谈一下节点的克隆,也就是复制节点,也就是将原有的节点进行复制,看下边这个例子:


[javascript] view plain copy print?

  1. <span style="font-size:18px;"><html>  

  2.     <head>  

  3.         <script type="text/javascript" src="/example/xdom/loadxmldoc.js">   

  4.         </script>  

  5.     </head>  

  6.     <body>  

  7.       

  8.         <script type="text/javascript">  

  9.             xmlDoc=loadXMLDoc("/example/xdom/books.xml");  

  10.             x=xmlDoc.getElementsByTagName('book')[0];//得到为book的第一个节点  

  11.             cloneNode=x.cloneNode(true);//克隆此节点  

  12.             xmlDoc.documentElement.appendChild(cloneNode);//将克隆好的节点添加到xml文件中  

  13.               

  14.             //Output all titles  

  15.             y=xmlDoc.getElementsByTagName("title");  

  16.             for (i=0;i<y.length;i++)  

  17.             {  

  18.                 document.write(y[i].childNodes[0].nodeValue);//循环显示title的节点  

  19.                 document.write("<br />");  

  20.             }  

  21.         </script>  

  22.     </body>  

  23. </html>  

  24. </span>  




    三,在视频中看到这样一个功能,感觉是对XML操作前非常必要的,也就是对于XML中的空行和换行的处理

         Firefox,以及其他一些浏览器,会把空的空白或换行作为文本节点来处理,而Internet Explorer 不会这样。这就需要我们在操作XML时,先将其空文本去掉:


         综上为XML DOM的简单理论学习,这里需要我们结合实例,来学习,多了解各种方法属性,结合HTML DOM一起学习。比较其中的同与异。当然这些都需要在用中不断发现,不断积累。


            DOM是学习AJAX的非常重要的一部分,起到了异步更新网页的的主要操作功能。当然AJAX中的核心还得学习XMLHttpRequest对象,下篇将来学习XMLHttpRequest的具体使用法。这段时间AJAX的学习,对B/S的很多块内容都起到了补充的作用。本来吗,AJAX就是多种知识结合的一个新知识。继续深入学习中……

转载至:http://blog.csdn.net/liujiahan629629/article/details/17122059


本文转自    风雨萧条 博客,原文链接:        http://blog.51cto.com/1095221645/1872785如需转载请自行联系原作者

相关文章
|
2月前
|
XML 存储 JavaScript
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
**XML DOM 遍历、操作和导航概述** - 遍历XML节点树用于提取信息,例如,通过JavaScript的DOM API循环`&lt;book&gt;`子节点显示名称和值。 - DOM解析器处理XML文本数据,包括解析字符数据(PCDATA)和识别CDATA段。 - 节点导航涉及`parentNode`、`childNodes`等属性,`get_nextSibling`等辅助函数避免空文本节点。 - `getElementsByTagName`、`getAttribute`和`nodeValue`用于检索元素、属性值和文本。
42 6
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
|
4天前
|
XML JavaScript 数据格式
XML DOM 节点列表
`getElementsByTagName()` 和 `childNodes` 返回 XML DOM 中的节点列表,表现为按顺序排列的节点集合。节点通过 0 开始的索引访问。例如,以下代码加载 &quot;books.xml&quot;,获取所有 `&lt;title&gt;` 元素的节点列表,然后提取第一个 `&lt;title&gt;` 的文本内容:`xmlDoc.getElementsByTagName(&quot;title&quot;)[0].childNodes[0].nodeValue`,结果为 &quot;Everyday Italian&quot;。
|
6天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM 节点详解:nodeName、nodeValue 和 nodeType 属性用于获取和操作节点信息。示例展示如何加载XML文件,如books.xml,通过loadXMLDoc函数。nodeName获取元素节点名,nodeValue用于获取或设置文本节点内容,nodeType显示节点类型(如元素:1,属性:2,文本:3,注释:8,文档:9)。每个节点都是可访问和操作的对象,包含方法和属性。
|
1天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM提供nodeName、nodeValue和nodeType属性来揭示节点详情。一个JavaScript示例展示了如何运用这些属性:loadXMLDoc函数加载XML文件&quot;books.xml&quot;,然后通过nodeName获取根元素名,用nodeValue提取文本节点的内容。
|
2天前
|
XML Web App开发 JavaScript
XML DOM - 导航节点
在XML DOM中,导航节点涉及利用parentNode、childNodes、firstChild、lastChild、nextSibling和previousSibling属性来遍历节点树。不同浏览器对空文本节点处理不一致,可能导致导航问题。为解决此问题,可以使用get_nextSibling函数,它检查并跳过非元素类型的空文本节点,确保在IE和Firefox等浏览器中得到一致的结果。该函数循环遍历直到找到下一个元素节点。
|
2天前
|
XML JavaScript 数据格式
XML DOM 浏览器差异
不同浏览器对XML DOM解析处理存在差异,尤其是在处理空白和换行方面。当XML文档中包含换行和空格时,Internet Explorer不会将这些视为文本节点,而其他浏览器则会。例如,一个简单的XML文档在各子节点间有空格和换行,IE会识别为4个子节点,而其他浏览器则识别为9个。示例代码通过加载XML文件并输出子节点数量来展示这一差异。
|
3天前
|
XML JavaScript 前端开发
XML DOM 遍历节点树
该示例展示了如何遍历XML文档的节点树。通过DOMParser解析XML字符串得到xmlDoc,然后遍历根节点的子节点,显示每个节点的名称及其文本值。输出结果为:&quot;title: Everyday Italian&quot;, &quot;author: Giada De Laurentiis&quot;, &quot;year: 2005&quot;。代码使用JavaScript实现,循环遍历并更新HTML元素`&lt;p id=&quot;demo&quot;&gt;&lt;/p&gt;`的内容。
|
6天前
|
XML JavaScript 前端开发
XML DOM 节点信息
XML DOM中的每个节点都是一个具有方法和属性的对象,可通过JavaScript操作。关键属性有:nodeName(定义节点名称,如元素、属性或#text)、nodeValue(提供节点值,如文本或属性值)和nodeType。元素节点的nodeName等于标签名,属性节点的nodeName是属性名。文本节点的nodeValue是其文本内容,而文档节点的nodeName是&quot;#document&quot;。示例代码演示了如何获取第一个&lt;title&gt;元素的文本值。
|
8天前
|
XML 存储 JavaScript
XML DOM - 访问节点
使用DOM,可以访问XML文档的每个节点。访问方法包括:通过getElementsByTagName(),遍历节点树和导航节点关系。getElementsByTagName()返回一个Node List,它是节点数组,可用于按索引访问元素,如`x[2]`获取第三个&lt;title&gt;元素。后续章节将进一步探讨Node List。
|
8天前
|
XML JavaScript 数据格式
XML DOM - 访问节点
XML DOM 允许访问每个文档节点。方法包括:`getElementsByTagName()`用于获取指定标签的元素;遍历节点树;及导航节点关系。例如,`getElementsByTagName(&quot;title&quot;)`返回所有`&lt;title&gt;`元素。在示例中,`x.getElementsByTagName(&quot;title&quot;)`找到`x`下的`&lt;title&gt;`,而`xmlDoc.getElementsByTagName(&quot;title&quot;)`则查找整个文档的`&lt;title&gt;`元素。