打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
使用js解析xml文档和xml字符串(ie和火狐)

原文:http://blog.csdn.net/lushuaiyin/article/details/7564631

使用js解析xml文档和xml字符串。

 

分别针对ie和火狐分别作了对xml文档和xml字符串的解析,所有代码都注释掉了,想看哪部分功能,

去掉注释就可以了。

 

至于在ajax环境下解析xml,其实原理是一样的,只不过放在了ajax里,还是要对返回的xml进行解析。

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Author" content="lushuaiyin">  
  6.  </head>  
  7.  <body>  
  8.   用js解析xml文档和xml字符串  
  9.  </body>  
  10. </html>  
  11.   
  12. <script>  
  13. //解析xml文档/////////////////////////////////////////////////////  
  14. var xmlDoc=null;  
  15.   
  16. //支持IE浏览器  
  17. if(window.ActiveXObject){  
  18.    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");   
  19. }  
  20. //支持Mozilla浏览器  
  21. else if(document.implementation && document.implementation.createDocument){  
  22.    xmlDoc = document.implementation.createDocument('','',null);  
  23. }  
  24. else{  
  25.   alert("here");  
  26. }  
  27. if(xmlDoc!=null){  
  28.    xmlDoc.async = false;  
  29.    xmlDoc.load("house.xml");  
  30. }  
  31.   
  32. //ie和火狐不仅解析器不一样,解析过程也不一样。如下;  
  33. //ie解析xml文档  
  34. //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万  
  35. //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居  
  36.   
  37. //层层遍历解析childNodes[1]  
  38. //alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//弹出200万  
  39. //alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万  
  40. //alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居  
  41.   
  42.   
  43. //还可以用item(i)进行遍历  
  44. //var nodes=xmlDoc.documentElement.childNodes;  
  45. //alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出150万  
  46. //alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出一室三居  
  47.   
  48. //火狐解析xml文档  
  49. //火狐浏览器和ie解析xml不一样节点的值用textContent。  
  50. //并且他会在有的层次child节点前后都加上"\n"换行符。(这个搞不清楚为什么,用firebug调试的时候就是这个样子,所以写过的代码最好测试一下,换个环境就不对了)  
  51. //也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。  
  52. //第3个节点是"\n",第4个节点才是真正的第二个节点。  
  53. //层层获取解析childNodes[0]  
  54. //alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//弹出150万  
  55. //alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//弹出一室三居  
  56.   
  57. //直接获取节点名解析getElementsByTagName("address")  
  58. //alert(xmlDoc.getElementsByTagName("address")[0].textContent);//弹出150万 一室三居 200万  300万  
  59. //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//弹出150万 一室三居  
  60. //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//弹出150万  
  61. //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//弹出一室三居  
  62. //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//弹出200万   
  63.   
  64.   
  65. //火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。  
  66. //第一个节点是item(1),第二个节点是item(3),第三个节点是item(5)  
  67. //item(1)函数遍历解析  
  68. //var nodes=xmlDoc.documentElement.childNodes;  
  69. //alert(nodes.item(1).textContent); //弹出150万  一室三居  
  70. //alert(nodes.item(1).childNodes.item(1).textContent); //弹出150万    
  71. //alert(nodes.item(1).childNodes.item(3).textContent); //一室三居   
  72.   
  73.   
  74.   
  75.   
  76.   
  77.   
  78.   
  79.   
  80. //解析xml字符串/////////////////////////////////////////////////////////////////////////  
  81. var str="<car>"+  
  82. "<brand><price>50万</price><pattern>A6</pattern></brand>"+  
  83. "<brand><price>65万</price><pattern>A8</pattern></brand>"+  
  84. "<brand><price>17万</price></brand>"+  
  85. "</car>";  
  86.   
  87. //跨浏览器,ie和火狐解析xml使用的解析器是不一样的。  
  88. var xmlStrDoc=null;  
  89. if (window.DOMParser){// Mozilla Explorer  
  90.   parser=new DOMParser();  
  91.   xmlStrDoc=parser.parseFromString(str,"text/xml");  
  92. }else{// Internet Explorer  
  93.   xmlStrDoc=new ActiveXObject("Microsoft.XMLDOM");  
  94.   xmlStrDoc.async="false";  
  95.   xmlStrDoc.loadXML(str);  
  96. }  
  97.   
  98.   
  99. //ie解析xml字符串  
  100. //alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出50万  
  101. //alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出A6  
  102.   
  103. //还可以用item(i)进行遍历  
  104. //var strNodes=xmlStrDoc.documentElement.childNodes;  
  105. //alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出50万  
  106. //alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出A6  
  107.   
  108.   
  109.   
  110. //火狐解析xml字符串  
  111. //火狐浏览器和ie解析xml不一样节点的值用textContent。  
  112. //并且他会在有的层次child节点前后都加上"\n"换行符。  
  113. //也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。  
  114. //第3个节点是"\n",第4个节点才是真正的第二个节点。  
  115. //alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//弹出65万  A8  
  116. //alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8  
  117. //alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//弹出65万  
  118.   
  119. //火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。  
  120. //第一个节点是item(1),第二个节点是item(3),第三个节点是item(5)  
  121. //var nodes=xmlStrDoc.documentElement.childNodes;  
  122. //alert(nodes.item(1).textContent); //弹出65万  A8  
  123. //alert(nodes.item(1).childNodes.item(0).textContent); //弹出65万   
  124. //alert(nodes.item(1).childNodes.item(1).textContent); //弹出A8   
  125.   
  126. </script>  



其中xml每个节点所在层次是最烦人的问题,只能一次次去试,只要出来一个正确的,

就很好确定节点的层次关系了,或者debug一下。

感觉这方面json还是更好阅读和理解。这个解析太费劲了!

 

 

文档house.xml内容如下:

  1. <?xml version="1.0" encoding="utf-8" ?>     
  2. <address>    
  3.    <city name="北京">    
  4.        <price>150万</price>    
  5.        <type>一室三居</type>    
  6.    </city>    
  7.    <city name="上海">    
  8.        <price>200万 </price>    
  9.    </city>    
  10.    <city name="杭州">    
  11.        <price>230万</price>    
  12.    </city>    
  13.    <city name="南京"></city>    
  14. </address>    



本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
XML DOM介绍
用QTP调用外部vbs读写XML的例子
二级联动JS+XML
VB.NET中操作xml文件
xml增删改查
主题:JavaScript解析XML知识点总结
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服