JS解析XML文件和XML字符串詳解
JS解析XML文件
<script type='text/javascript'> loadXML = function(xmlFile){ var xmlDoc=null; //判斷瀏覽器的類(lèi)型 //支持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ù)說(shuō)明 * 第一個(gè)參數(shù)是包含文檔所使用的命名空間URI的字符串; * 第二個(gè)參數(shù)是包含文檔根元素名稱(chēng)的字符串; * 第三個(gè)參數(shù)是要?jiǎng)?chuàng)建的文檔類(lèi)型(也稱(chē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; //判斷瀏覽器的類(lèi)型 //支持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ù)來(lái)實(shí)例化它,然后調(diào)用其 parseFromString() 方法 * parseFromString(text, contentType) 參數(shù)text:要解析的 XML 標(biāo)記 參數(shù)contentType文本的內(nèi)容類(lè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>
測(cè)試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,下面我們來(lái)探討下IE和火狐瀏覽器下解析XML的問(wèn)題
分別針對(duì)ie和火狐分別作了對(duì)xml文檔和xml字符串的解析,所有代碼都注釋掉了,想看哪部分功能,
去掉注釋就可以了。
至于在ajax環(huán)境下解析xml,其實(shí)原理是一樣的,只不過(guò)放在了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和火狐不僅解析器不一樣,解析過(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)勁了!
文檔house.xml內(nè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>
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- javascript XMLHttpRequest對(duì)象全面剖析
- JS解析XML的實(shí)現(xiàn)代碼
- javascript 讀取XML數(shù)據(jù),在頁(yè)面中展現(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,寫(xiě)入xml 實(shí)現(xiàn)代碼
- 使用JS讀取XML文件的方法
- JS操作XML中DTD介紹及使用方法分析
相關(guān)文章
JS日期和時(shí)間選擇控件升級(jí)版(自寫(xiě))
鑒于網(wǎng)上找到的幾個(gè)日期選擇程序有些問(wèn)題,遂著手重寫(xiě)一個(gè)程序,添加了時(shí)間選擇功能,截圖及源碼如下,有需要的朋友可以參考下2013-08-08JS實(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ì)頁(yè)面dom元素節(jié)點(diǎn)與屬性的動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04淺析js中的every()對(duì)空數(shù)組總返回true
JavaScript?語(yǔ)言的核心部分足夠大,以至于我們很容易誤解其某些部分的工作方式,本文就來(lái)和大家一起討論下為什么JS中的?every()對(duì)空數(shù)組總返回?true,需要的可以參考下2023-09-09JS實(shí)現(xiàn)iframe中子父頁(yè)面跨域通訊的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)iframe中子父頁(yè)面跨域通訊的方法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)iframe頁(yè)面跨域通訊常見(jiàn)操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-03-03JavaScript 上萬(wàn)關(guān)鍵字瞬間匹配實(shí)現(xiàn)代碼
發(fā)一篇之前寫(xiě)的文章,平時(shí)還是經(jīng)常用到的,尤其是河蟹詞特別多的聊天系統(tǒng)里2013-07-07