js解析xml字符串和xml文檔實(shí)現(xiàn)原理及代碼(針對(duì)ie與火狐)
更新時(shí)間：2013年02月02日 14:46:25 作者：
分別針對(duì)ie和火狐分別作了對(duì)xml文檔和xml字符串的解析,考慮到了瀏覽器的兼容性,至于在ajax環(huán)境下解析xml，其實(shí)原理是一樣的，只不過(guò)放在了ajax里，還是要對(duì)返回的xml進(jìn)行解析,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)js解析xml有所幫助
分別針對(duì)ie和火狐分別作了對(duì)xml文檔和xml字符串的解析，所有代碼都注釋掉了，想看哪部分功能，去掉注釋就可以了。
至于在ajax環(huán)境下解析xml，其實(shí)原理是一樣的，只不過(guò)放在了ajax里，還是要對(duì)返回的xml進(jìn)行解析。
<!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和火狐不僅解析器不一樣，解析過(guò)程也不一樣。如下;
//ie解析xml文檔
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬(wàn)
//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萬(wàn)
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬(wàn)
//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萬(wàn)
//alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出一室三居
//火狐解析xml文檔
//火狐瀏覽器和ie解析xml不一樣節(jié)點(diǎn)的值用textContent。
//并且他會(huì)在有的層次child節(jié)點(diǎn)前后都加上"\n"換行符。（這個(gè)搞不清楚為什么，用firebug調(diào)試的時(shí)候就是這個(gè)樣子，所以寫(xiě)過(guò)的代碼最好測(cè)試一下，換個(gè)環(huán)境就不對(duì)了）
//也就是說(shuō)第1個(gè)節(jié)點(diǎn)是"\n",第2個(gè)節(jié)點(diǎn)才是真正的第一個(gè)節(jié)點(diǎn)。
//第3個(gè)節(jié)點(diǎn)是"\n",第4個(gè)節(jié)點(diǎn)才是真正的第二個(gè)節(jié)點(diǎn)。
//層層獲取解析childNodes[0]
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//彈出150萬(wàn)
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//彈出一室三居
//直接獲取節(jié)點(diǎn)名解析getElementsByTagName("address")
//alert(xmlDoc.getElementsByTagName("address")[0].textContent);//彈出150萬(wàn) 一室三居 200萬(wàn) 300萬(wàn)
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//彈出150萬(wàn) 一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//彈出150萬(wàn)
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//彈出一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//彈出200萬(wàn)
//火狐也可以用item(1)函數(shù)遍歷，注意也是有的層次節(jié)點(diǎn)前后都加了節(jié)點(diǎn)"\n"。
//第一個(gè)節(jié)點(diǎn)是item(1)，第二個(gè)節(jié)點(diǎn)是item(3)，第三個(gè)節(jié)點(diǎn)是item(5)
//item(1)函數(shù)遍歷解析
//var nodes=xmlDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent); //彈出150萬(wàn) 一室三居
//alert(nodes.item(1).childNodes.item(1).textContent); //彈出150萬(wàn)
//alert(nodes.item(1).childNodes.item(3).textContent); //一室三居
//解析xml字符串/////////////////////////////////////////////////////////////////////////
var str="<car>"+
"<brand><price>50萬(wàn)</price><pattern>A6</pattern></brand>"+
"<brand><price>65萬(wàn)</price><pattern>A8</pattern></brand>"+
"<brand><price>17萬(wàn)</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萬(wàn)
//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萬(wàn)
//alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出A6
//火狐解析xml字符串
//火狐瀏覽器和ie解析xml不一樣節(jié)點(diǎn)的值用textContent。
//并且他會(huì)在有的層次child節(jié)點(diǎn)前后都加上"\n"換行符。
//也就是說(shuō)第1個(gè)節(jié)點(diǎn)是"\n",第2個(gè)節(jié)點(diǎn)才是真正的第一個(gè)節(jié)點(diǎn)。
//第3個(gè)節(jié)點(diǎn)是"\n",第4個(gè)節(jié)點(diǎn)才是真正的第二個(gè)節(jié)點(diǎn)。
//alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//彈出65萬(wàn) A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//彈出65萬(wàn)
//火狐也可以用item(1)函數(shù)遍歷，注意也是有的層次節(jié)點(diǎn)前后都加了節(jié)點(diǎn)"\n"。
//第一個(gè)節(jié)點(diǎn)是item(1)，第二個(gè)節(jié)點(diǎn)是item(3)，第三個(gè)節(jié)點(diǎn)是item(5)
//var nodes=xmlStrDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent); //彈出65萬(wàn) A8
//alert(nodes.item(1).childNodes.item(0).textContent); //彈出65萬(wàn)
//alert(nodes.item(1).childNodes.item(1).textContent); //彈出A8
</script>
其中xml每個(gè)節(jié)點(diǎn)所在層次是最煩人的問(wèn)題，只能一次次去試，只要出來(lái)一個(gè)正確的，
就很好確定節(jié)點(diǎn)的層次關(guān)系了，或者debug一下。
感覺(jué)這方面json還是更好閱讀和理解。這個(gè)解析太費(fèi)勁了
<?xml version="1.0" encoding="utf-8" ?>
<address>
<city name="北京">
<price>150萬(wàn)</price>
<type>一室三居</type>
</city>
<city name="上海">
<price>200萬(wàn) </price>
</city>
<city name="杭州">
<price>230萬(wàn)</price>
</city>
<city name="南京"></city>
</address>
至于在ajax環(huán)境下解析xml，其實(shí)原理是一樣的，只不過(guò)放在了ajax里，還是要對(duì)返回的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和火狐不僅解析器不一樣，解析過(guò)程也不一樣。如下;
//ie解析xml文檔
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬(wàn)
//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萬(wàn)
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬(wàn)
//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萬(wàn)
//alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出一室三居
//火狐解析xml文檔
//火狐瀏覽器和ie解析xml不一樣節(jié)點(diǎn)的值用textContent。
//并且他會(huì)在有的層次child節(jié)點(diǎn)前后都加上"\n"換行符。（這個(gè)搞不清楚為什么，用firebug調(diào)試的時(shí)候就是這個(gè)樣子，所以寫(xiě)過(guò)的代碼最好測(cè)試一下，換個(gè)環(huán)境就不對(duì)了）
//也就是說(shuō)第1個(gè)節(jié)點(diǎn)是"\n",第2個(gè)節(jié)點(diǎn)才是真正的第一個(gè)節(jié)點(diǎn)。
//第3個(gè)節(jié)點(diǎn)是"\n",第4個(gè)節(jié)點(diǎn)才是真正的第二個(gè)節(jié)點(diǎn)。
//層層獲取解析childNodes[0]
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//彈出150萬(wàn)
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//彈出一室三居
//直接獲取節(jié)點(diǎn)名解析getElementsByTagName("address")
//alert(xmlDoc.getElementsByTagName("address")[0].textContent);//彈出150萬(wàn) 一室三居 200萬(wàn) 300萬(wàn)
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//彈出150萬(wàn) 一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//彈出150萬(wàn)
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//彈出一室三居
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//彈出200萬(wàn)
//火狐也可以用item(1)函數(shù)遍歷，注意也是有的層次節(jié)點(diǎn)前后都加了節(jié)點(diǎn)"\n"。
//第一個(gè)節(jié)點(diǎn)是item(1)，第二個(gè)節(jié)點(diǎn)是item(3)，第三個(gè)節(jié)點(diǎn)是item(5)
//item(1)函數(shù)遍歷解析
//var nodes=xmlDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent); //彈出150萬(wàn) 一室三居
//alert(nodes.item(1).childNodes.item(1).textContent); //彈出150萬(wàn)
//alert(nodes.item(1).childNodes.item(3).textContent); //一室三居
//解析xml字符串/////////////////////////////////////////////////////////////////////////
var str="<car>"+
"<brand><price>50萬(wàn)</price><pattern>A6</pattern></brand>"+
"<brand><price>65萬(wàn)</price><pattern>A8</pattern></brand>"+
"<brand><price>17萬(wàn)</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萬(wàn)
//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萬(wàn)
//alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出A6
//火狐解析xml字符串
//火狐瀏覽器和ie解析xml不一樣節(jié)點(diǎn)的值用textContent。
//并且他會(huì)在有的層次child節(jié)點(diǎn)前后都加上"\n"換行符。
//也就是說(shuō)第1個(gè)節(jié)點(diǎn)是"\n",第2個(gè)節(jié)點(diǎn)才是真正的第一個(gè)節(jié)點(diǎn)。
//第3個(gè)節(jié)點(diǎn)是"\n",第4個(gè)節(jié)點(diǎn)才是真正的第二個(gè)節(jié)點(diǎn)。
//alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//彈出65萬(wàn) A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//彈出65萬(wàn)
//火狐也可以用item(1)函數(shù)遍歷，注意也是有的層次節(jié)點(diǎn)前后都加了節(jié)點(diǎn)"\n"。
//第一個(gè)節(jié)點(diǎn)是item(1)，第二個(gè)節(jié)點(diǎn)是item(3)，第三個(gè)節(jié)點(diǎn)是item(5)
//var nodes=xmlStrDoc.documentElement.childNodes;
//alert(nodes.item(1).textContent); //彈出65萬(wàn) A8
//alert(nodes.item(1).childNodes.item(0).textContent); //彈出65萬(wàn)
//alert(nodes.item(1).childNodes.item(1).textContent); //彈出A8
</script>
其中xml每個(gè)節(jié)點(diǎn)所在層次是最煩人的問(wèn)題，只能一次次去試，只要出來(lái)一個(gè)正確的，
就很好確定節(jié)點(diǎn)的層次關(guān)系了，或者debug一下。
感覺(jué)這方面json還是更好閱讀和理解。這個(gè)解析太費(fèi)勁了
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8" ?>
<address>
<city name="北京">
<price>150萬(wàn)</price>
<type>一室三居</type>
</city>
<city name="上海">
<price>200萬(wàn) </price>
</city>
<city name="杭州">
<price>230萬(wàn)</price>
</city>
<city name="南京"></city>
</address>
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)復(fù)選框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
javascript下漢字和Unicode編碼互轉(zhuǎn)代碼
這個(gè)是就是把漢字和Unicode編碼互轉(zhuǎn)的javascript代碼，也是從網(wǎng)上找到了，也許有人用得著！！2010-10-10
js實(shí)現(xiàn)無(wú)縫滾動(dòng)特效
這篇文章主要介紹了js實(shí)現(xiàn)無(wú)縫滾動(dòng)特效，結(jié)合已學(xué)知識(shí)進(jìn)行擴(kuò)展性練習(xí)，感興趣的朋友可以參考一下2015-12-12
網(wǎng)絡(luò)圖片延遲加載實(shí)現(xiàn)代碼 超越j(luò)query控件
原理是分段加載圖片，主要用于大型網(wǎng)站節(jié)省帶寬，可是他們提供的東西壓縮混淆看不清，還有的要基于什么雅虎的什么庫(kù)，總之是很麻煩的，JQ的控件倒是夠清晰了，只是還是沒(méi)有達(dá)到節(jié)省網(wǎng)絡(luò)帶寬的效果2010-03-03
ES6出來(lái)已經(jīng)有好幾年了，同時(shí)很多新特性可以被巧妙地運(yùn)用在項(xiàng)目中。我想要列下其中一些，希望它們對(duì)你有用2018-07-07
5個(gè)javascript的數(shù)字格式化函數(shù)分享
Javascript沒(méi)有任何內(nèi)建的格式化函數(shù)，這里我們通過(guò)Google收集了5個(gè)javascript的數(shù)字格式化函數(shù)，希望對(duì)于大家的web開(kāi)發(fā)能夠帶來(lái)方便2011-12-12
javascript-解決mongoose數(shù)據(jù)查詢的異步操作
這篇文章主要介紹了javascript-解決mongoose數(shù)據(jù)查詢的異步操作，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-12
javascript前端實(shí)現(xiàn)多視頻上傳
這篇文章主要為大家詳細(xì)介紹了javascript前端實(shí)現(xiàn)多視頻上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
javascript在當(dāng)前窗口關(guān)閉前檢測(cè)窗口是否關(guān)閉
檢測(cè)窗口是否關(guān)閉，在當(dāng)前窗口關(guān)閉前使用js做到這一點(diǎn)，下面是具體的實(shí)現(xiàn)，感興趣的朋友可以參考下2014-09-09
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)懸浮搜索框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07