JS解析XML文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判斷浏覽器的類型 //支持IE浏覽器 if(!window.DOMParser && window.ActiveXObject){ var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM']; for(var i=0;i<xmlDomVersions.length;i++){ try{ xmlDoc = new ActiveXObject(xmlDomVersions[i]); break; }catch(e){ } } } //支持Mozilla浏覽器 else if(document.implementation && document.implementation.createDocument){ try{ /* document.implementation.createDocument('','',null); 方法的三個參數說明 * 第一個參數是包含文檔所使用的命名空間URI的字符串； * 第二個參數是包含文檔根元素名稱的字符串； * 第三個參數是要創建的文檔類型（也稱為doctype） */ xmlDoc = document.implementation.createDocument('','',null); }catch(e){ } } else{ return null; } if(xmlDoc!=null){ xmlDoc.async = false; xmlDoc.load(xmlFile); } return xmlDoc; } </script>JS解析XML字符串
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <script type='text/javascript'> loadXML = function(xmlString){ var xmlDoc=null; //判斷浏覽器的類型 //支持IE浏覽器 if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判斷是否是非ie浏覽器 var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM']; for(var i=0;i<xmlDomVersions.length;i++){ try{ xmlDoc = new ActiveXObject(xmlDomVersions[i]); xmlDoc.async = false; xmlDoc.loadXML(xmlString); //loadXML方法載入xml字符串 break; }catch(e){ } } } //支持Mozilla浏覽器 else if(window.DOMParser && document.implementation && document.implementation.createDocument){ try{ /* DOMParser 對象解析 XML 文本並返回一個 XML Document 對象。 * 要使用 DOMParser，使用不帶參數的構造函數來實例化它，然後調用其 parseFromString() 方法 * parseFromString(text, contentType) 參數text:要解析的 XML 標記 參數contentType文本的內容類型 * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一個。注意，不支持 "text/html"。 */ domParser = new DOMParser(); xmlDoc = domParser.parseFromString(xmlString, 'text/xml'); }catch(e){ } } else{ return null; } return xmlDoc; } </script>測試XML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <?xml version="1.0" encoding="utf-8" ?> <DongFang> <Company> <cNname>1</cNname> <cIP>1</cIP> </Company> <Company> <cNname>2</cNname> <cIP>2</cIP> </Company> <Company> <cNname>3</cNname> <cIP>3</cIP> </Company> <Company> <cNname>4</cNname> <cIP>4</cIP> </Company> <Company> <cNname>5</cNname> <cIP>5</cIP> </Company> <Company> <cNname>6</cNname> <cIP>6</cIP> </Company> </DongFang>使用方法
? 1 2 3 4 5 6 var xmldoc=loadXML(text.xml) var elements = xmlDoc.getElementsByTagName("Company"); for (var i = 0; i < elements.length; i++) { var name = elements[i].getElementsByTagName("cNname")[0].firstChild.nodeValue; var ip = elements[i].getElementsByTagName("cIP")[0].firstChild.nodeValue; }以上方法適合IE，下面我們來探討下IE和火狐浏覽器下解析XML的問題
分別針對ie和火狐分別作了對xml文檔和xml字符串的解析，所有代碼都注釋掉了，想看哪部分功能，
去掉注釋就可以了。
至於在ajax環境下解析xml，其實原理是一樣的，只不過放在了ajax裡，還是要對返回的xml進行解析。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 <script> //解析xml文檔///////////////////////////////////////////////////// var xmlDoc=null; //支持IE浏覽器 if(window.ActiveXObject){ xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } //支持Mozilla浏覽器 else if(document.implementation && document.implementation.createDocument){ xmlDoc = document.implementation.createDocument('','',null); } else{ alert("here"); } if(xmlDoc!=null){ xmlDoc.async = false; xmlDoc.load("house.xml"); } //ie和火狐不僅解析器不一樣，解析過程也不一樣。如下; //ie解析xml文檔 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//彈出一室三居 //層層遍歷解析childNodes[1] //alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//彈出200萬 //alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬 //alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//彈出一室三居 //還可以用item(i)進行遍歷 //var nodes=xmlDoc.documentElement.childNodes; //alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text); //彈出150萬 //alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出一室三居 //火狐解析xml文檔 //火狐浏覽器和ie解析xml不一樣節點的值用textContent。 //並且他會在有的層次child節點前後都加上"n"換行符。（這個搞不清楚為什麼，用firebug調試的時候就是這個樣子，所以寫過的代碼最好測試一下，換個環境就不對了） //也就是說第1個節點是"n",第2個節點才是真正的第一個節點。 //第3個節點是"n",第4個節點才是真正的第二個節點。 //層層獲取解析childNodes[0] //alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//彈出150萬 //alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//彈出一室三居 //直接獲取節點名解析getElementsByTagName("address") //alert(xmlDoc.getElementsByTagName("address")[0].textContent);//彈出150萬 一室三居 200萬 300萬 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//彈出150萬 一室三居 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//彈出150萬 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//彈出一室三居 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//彈出200萬 //火狐也可以用item(1)函數遍歷，注意也是有的層次節點前後都加了節點"n"。 //第一個節點是item(1)，第二個節點是item(3)，第三個節點是item(5) //item(1)函數遍歷解析 //var nodes=xmlDoc.documentElement.childNodes; //alert(nodes.item(1).textContent); //彈出150萬 一室三居 //alert(nodes.item(1).childNodes.item(1).textContent); //彈出150萬 //alert(nodes.item(1).childNodes.item(3).textContent); //一室三居 //解析xml字符串///////////////////////////////////////////////////////////////////////// var str="<car>"+ "<brand><price>50萬</price><pattern>A6</pattern></brand>"+ "<brand><price>65萬</price><pattern>A8</pattern></brand>"+ "<brand><price>17萬</price></brand>"+ "</car>"; //跨浏覽器，ie和火狐解析xml使用的解析器是不一樣的。 var xmlStrDoc=null; if (window.DOMParser){// Mozilla Explorer parser=new DOMParser(); xmlStrDoc=parser.parseFromString(str,"text/xml"); }else{// Internet Explorer xmlStrDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlStrDoc.async="false"; xmlStrDoc.loadXML(str); } //ie解析xml字符串 //alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出50萬 //alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//彈出A6 //還可以用item(i)進行遍歷 //var strNodes=xmlStrDoc.documentElement.childNodes; //alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text); //彈出50萬 //alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出A6 //火狐解析xml字符串 //火狐浏覽器和ie解析xml不一樣節點的值用textContent。 //並且他會在有的層次child節點前後都加上"n"換行符。 //也就是說第1個節點是"n",第2個節點才是真正的第一個節點。 //第3個節點是"n",第4個節點才是真正的第二個節點。 //alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//彈出65萬 A8 //alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8 //alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//彈出65萬 //火狐也可以用item(1)函數遍歷，注意也是有的層次節點前後都加了節點"n"。 //第一個節點是item(1)，第二個節點是item(3)，第三個節點是item(5) //var nodes=xmlStrDoc.documentElement.childNodes; //alert(nodes.item(1).textContent); //彈出65萬 A8 //alert(nodes.item(1).childNodes.item(0).textContent); //彈出65萬 //alert(nodes.item(1).childNodes.item(1).textContent); //彈出A8 </script>
其中xml每個節點所在層次是最煩人的問題，只能一次次去試，只要出來一個正確的，
就很好確定節點的層次關系了，或者debug一下。
感覺這方面json還是更好閱讀和理解。這個解析太費勁了！
文檔house.xml內容如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?xml version="1.0" encoding="utf-8" ?> <address> <city name="北京"> <price>150萬</price> <type>一室三居</type> </city> <city name="上海"> <price>200萬 </price> </city> <city name="杭州"> <price>230萬</price> </city> <city name="南京"></city> </address>