JS解析XML文件和XML字符串詳解
更新時(shí)間：2015年04月17日 16:00:20 投稿：hebedich
這篇文章主要介紹了JS解析XML文件和XML字符串詳解，推薦給大家，有需要的小伙伴可以參考下。
JS解析XML文件
<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); 方法的三個(gè)參數(shù)說明
* 第一個(gè)參數(shù)是包含文檔所使用的命名空間URI的字符串；
* 第二個(gè)參數(shù)是包含文檔根元素名稱的字符串；
* 第三個(gè)參數(shù)是要?jiǎng)?chuàng)建的文檔類型（也稱為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字符串
<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 對(duì)象解析 XML 文本并返回一個(gè) XML Document 對(duì)象。
* 要使用 DOMParser，使用不帶參數(shù)的構(gòu)造函數(shù)來實(shí)例化它，然后調(diào)用其 parseFromString() 方法
* parseFromString(text, contentType) 參數(shù)text:要解析的 XML 標(biāo)記 參數(shù)contentType文本的內(nèi)容類型
* 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一個(gè)。注意，不支持 "text/html"。
*/
domParser = new DOMParser();
xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
}catch(e){
}
}
else{
return null;
}
return xmlDoc;
}
</script>
測試XML
<?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>
使用方法
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的問題
分別針對(duì)ie和火狐分別作了對(duì)xml文檔和xml字符串的解析，所有代碼都注釋掉了，想看哪部分功能，
去掉注釋就可以了。
至于在ajax環(huán)境下解析xml，其實(shí)原理是一樣的，只不過放在了ajax里，還是要對(duì)返回的xml進(jìn)行解析。
<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é)點(diǎn)的值用textContent。
//并且他會(huì)在有的層次child節(jié)點(diǎn)前后都加上"\n"換行符。（這個(gè)搞不清楚為什么，用firebug調(diào)試的時(shí)候就是這個(gè)樣子，所以寫過的代碼最好測試一下，換個(gè)環(huán)境就不對(duì)了）
//也就是說第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萬
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//彈出一室三居
//直接獲取節(jié)點(diǎn)名解析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é)點(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萬 一室三居
//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é)點(diǎn)的值用textContent。
//并且他會(huì)在有的層次child節(jié)點(diǎn)前后都加上"\n"換行符。
//也就是說第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萬 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é)點(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萬 A8
//alert(nodes.item(1).childNodes.item(0).textContent); //彈出65萬
//alert(nodes.item(1).childNodes.item(1).textContent); //彈出A8
</script>
其中xml每個(gè)節(jié)點(diǎn)所在層次是最煩人的問題，只能一次次去試，只要出來一個(gè)正確的，
就很好確定節(jié)點(diǎn)的層次關(guān)系了，或者debug一下。
感覺這方面json還是更好閱讀和理解。這個(gè)解析太費(fèi)勁了！
文檔house.xml內(nèi)容如下：
<?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>
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- javascript XMLHttpRequest對(duì)象全面剖析
- JS解析XML的實(shí)現(xiàn)代碼
- javascript 讀取XML數(shù)據(jù)，在頁面中展現(xiàn)、編輯、保存的實(shí)現(xiàn)
- JavaScript 解析讀取XML文檔 實(shí)例代碼
- js字符串轉(zhuǎn)換成xml對(duì)象并使用技巧解讀
- javascript解析xml字符串的函數(shù)
- JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)
- JS讀取XML文件示例代碼
- javascript 讀取xml,寫入xml 實(shí)現(xiàn)代碼
- 使用JS讀取XML文件的方法
- JS操作XML中DTD介紹及使用方法分析
相關(guān)文章
今天小編就為大家分享一篇關(guān)于JavaScript之解構(gòu)賦值的理解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了js表單登陸驗(yàn)證的方法,基于thinkPHP前端頁面實(shí)現(xiàn)javascript針對(duì)表單用戶名與密碼的驗(yàn)證功能,需要的朋友可以參考下2016-10-10
鑒于網(wǎng)上找到的幾個(gè)日期選擇程序有些問題，遂著手重寫一個(gè)程序，添加了時(shí)間選擇功能，截圖及源碼如下，有需要的朋友可以參考下2013-08-08
JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)添加DOM節(jié)點(diǎn)和事件的方法,涉及javascript事件響應(yīng)及針對(duì)頁面dom元素節(jié)點(diǎn)與屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了js實(shí)現(xiàn)的二分查找算法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JavaScript簡單實(shí)現(xiàn)二分查找算法的運(yùn)算原理與具體步驟,需要的朋友可以參考下2016-01-01
淺析js中的every()對(duì)空數(shù)組總返回true
JavaScript?語言的核心部分足夠大,以至于我們很容易誤解其某些部分的工作方式,本文就來和大家一起討論下為什么JS中的?every()對(duì)空數(shù)組總返回?true,需要的可以參考下2023-09-09
JS實(shí)現(xiàn)iframe中子父頁面跨域通訊的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)iframe中子父頁面跨域通訊的方法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)iframe頁面跨域通訊常見操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文件拖拽事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
JavaScript 上萬關(guān)鍵字瞬間匹配實(shí)現(xiàn)代碼
發(fā)一篇之前寫的文章，平時(shí)還是經(jīng)常用到的，尤其是河蟹詞特別多的聊天系統(tǒng)里2013-07-07