转载: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>