使用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还是更好阅读和理解。这个解析太费劲了！

 

 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>

 

 

 

 

posted @ 2013-02-02 11:40  古来征战几人回  阅读(431)  评论(0)    收藏  举报