快捷導(dǎo)航

js解析xml字符串和xml文檔實現(xiàn)原理及代碼(針對ie與火狐)

更新時間：2013年02月02日 14:46:25 作者：

分別針對ie和火狐分別作了對xml文檔和xml字符串的解析,考慮到了瀏覽器的兼容性,至于在ajax環(huán)境下解析xml，其實原理是一樣的，只不過放在了ajax里，還是要對返回的xml進(jìn)行解析,感興趣的朋友可以了解下，或許對你學(xué)習(xí)js解析xml有所幫助

分別針對ie和火狐分別作了對xml文檔和xml字符串的解析，所有代碼都注釋掉了，想看哪部分功能，去掉注釋就可以了。

至于在ajax環(huán)境下解析xml，其實原理是一樣的，只不過放在了ajax里，還是要對返回的xml進(jìn)行解析。

復(fù)制代碼代碼如下:

 
<!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和火狐不僅解析器不一樣，解析過程也不一樣。如下; 
//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)進(jìn)行遍歷 
//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不一樣節(jié)點的值用textContent。 
//并且他會在有的層次child節(jié)點前后都加上"\n"換行符。（這個搞不清楚為什么，用firebug調(diào)試的時候就是這個樣子，所以寫過的代碼最好測試一下，換個環(huán)境就不對了） 
//也就是說第1個節(jié)點是"\n",第2個節(jié)點才是真正的第一個節(jié)點。 
//第3個節(jié)點是"\n",第4個節(jié)點才是真正的第二個節(jié)點。 
//層層獲取解析childNodes[0] 
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//彈出150萬 
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//彈出一室三居 
//直接獲取節(jié)點名解析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)函數(shù)遍歷，注意也是有的層次節(jié)點前后都加了節(jié)點"\n"。 
//第一個節(jié)點是item(1)，第二個節(jié)點是item(3)，第三個節(jié)點是item(5) 
//item(1)函數(shù)遍歷解析 
//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)進(jìn)行遍歷 
//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不一樣節(jié)點的值用textContent。 
//并且他會在有的層次child節(jié)點前后都加上"\n"換行符。 
//也就是說第1個節(jié)點是"\n",第2個節(jié)點才是真正的第一個節(jié)點。 
//第3個節(jié)點是"\n",第4個節(jié)點才是真正的第二個節(jié)點。 
//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)函數(shù)遍歷，注意也是有的層次節(jié)點前后都加了節(jié)點"\n"。 
//第一個節(jié)點是item(1)，第二個節(jié)點是item(3)，第三個節(jié)點是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每個節(jié)點所在層次是最煩人的問題，只能一次次去試，只要出來一個正確的，
就很好確定節(jié)點的層次關(guān)系了，或者debug一下。

感覺這方面json還是更好閱讀和理解。這個解析太費勁了

復(fù)制代碼代碼如下:

 
<?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> 