使用js解析xml文檔和xml字串。
分別針對ie和Firefox分別作了對xml文檔和xml字串的解析,所有代碼都注釋掉了,想看哪部分功能,
去掉注釋就可以了。
至於在ajax環境下解析xml,其實原理是一樣的,只不過放在了ajax裡,還是要對返回的xml進行解析。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Author" content="lushuaiyin"> </head> <body> 用js解析xml文檔和xml字串 </body></html><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和Firefox不僅解析器不一樣,解析過程也不一樣。如下;//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); //彈出一室三居//Firefox解析xml文檔//Firefox瀏覽器和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萬 //Firefox也可以用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和Firefox解析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//Firefox解析xml字串//Firefox瀏覽器和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萬//Firefox也可以用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內容如下:
<?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>