JS操作XML實例總結(加載與解析XML文件、字符串)
更新時間：2015年12月08日 10:03:37 作者：仰天一笑
這篇文章主要介紹了JS操作XML的方法,結合實例形式總結分析了JavaScript加載與解析XML文件及字符串的相關技巧,需要的朋友可以參考下
本文實例講述了JS操作XML的方法。分享給大家供大家參考，具體如下：
我的xml文件Login.xml如下.
<?xml version="1.0" encoding="utf-8" ?> <Login> <Character> <C Text="熱血" Value="0"></C> <C Text="弱氣" Value="1"></C> <C Text="激情" Value="2"></C> <C Text="冷靜" Value="3"></C> <C Text="冷酷" Value="4"></C> </Character> <Weapon> <W Text="光束劍" Value="0"></W> <W Text="光束配刀" Value="1"></W> </Weapon> <EconomyProperty> <P Text="平均型" Value="0"></P> <P Text="重視攻擊" Value="1"></P> <P Text="重視敏捷" Value="2"></P> <P Text="重視防御" Value="3"></P> <P Text="重視命中" Value="4"></P> </EconomyProperty> </Login>
現在我需要對這個xml文件的內容進行操作.
首先,我們需要加載這個xml文件,js中加載xml文件,是通過XMLDOM來進行的.
// 加載xml文檔
loadXML = function(xmlFile)
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
else if (document.implementation&&document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument('', '', null);
xmlDoc.load(xmlFile);
}
else
{
return null;
}
return xmlDoc;
}
xml文件對象出來了, 接下去我就要對這個文檔進行操作了.
比如說,我們現在需要得到節(jié)點Login/Weapon/W的第一個節(jié)點的屬性,那么我們可以如下進行.
// 首先對xml對象進行判斷
checkXMLDocObj = function(xmlFile)
{
var xmlDoc = loadXML(xmlFile);
if(xmlDoc==null)
{
alert('您的瀏覽器不支持xml文件讀取,于是本頁面禁止您的操作,推薦使用IE5.0以上可以解決此問題!');
window.location.href='/Index.aspx';
}
return xmlDoc;
}
// 然后開始獲取需要的Login/Weapon/W的第一個節(jié)點的屬性值
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var v = xmlDoc.getElementsByTagName('Login/Weapon/W')[0].childNodes.getAttribute('Text')
而我在我的程序中的寫法是這樣子的,當然我在程序中的寫法是已經應用到實際中的了.一并給出來,以供查看
initializeSelect = function(oid, xPath)
{
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var n;
var l;
var e = $(oid);
if(e!=null)
{
n = xmlDoc.getElementsByTagName(xPath)[0].childNodes;
l = n.length;
for(var i=0; i<l; i++)
{
var option = document.createElement('option');
option.value = n[i].getAttribute('Value');
option.innerHTML = n[i].getAttribute('Text');
e.appendChild(option);
}
}
}
上面的訪問代碼中,我們是通過xmlDoc.getElementsByTagName(xPath)來進行的.
還可以通過xmlDoc.documentElement.childNodes(1)..childNodes(0).getAttribute('Text')進行訪問.
一些常用方法:
xmlDoc.documentElement.childNodes(0).nodeName,可以得到這個節(jié)點的名稱.
xmlDoc.documentElement.childNodes(0).nodeValue,可以得到這個節(jié)點的值. 這個值是來自于這樣子的xml格式:<a>b</b>, 于是可以得到b這個值.
xmlDoc.documentElement.childNodes(0).hasChild,可以判斷是否有子節(jié)點
根據我的經驗,最好是使用getElementsByTagName(xPath)的方法對節(jié)點進行訪問,因為這樣子可以直接通過xPath來定位節(jié)點,這樣子會有更好的性能.
補充：
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); 方法的三個參數說明
* 第一個參數是包含文檔所使用的命名空間URI的字符串；
* 第二個參數是包含文檔根元素名稱的字符串；
* 第三個參數是要創(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 對象解析 XML 文本并返回一個 XML Document 對象。
* 要使用 DOMParser，使用不帶參數的構造函數來實例化它，然后調用其 parseFromString() 方法
* parseFromString(text, contentType) 參數text:要解析的 XML 標記 參數contentType文本的內容類型
* 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一個。注意，不支持 "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;
}
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
這篇文章主要介紹了Redux中進行異步操作(網絡請求)的方案,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了微信小程序 自定義彈窗實現過程(附代碼),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家介紹了JS前端首屏優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了小程序登錄態(tài)管理的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
JavaScript遍歷數組的三種方法map、forEach與filter實例詳解
這篇文章主要介紹了JavaScript遍歷數組的三種方法map、forEach與filter,結合實例形式詳細分析了javascript針對數組遍歷的map、forEach與filter三種方法相關操作技巧與注意事項,需要的朋友可以參考下2019-02-02
先說明，此處的方法是說超級簡單的方法，不是指代碼超級少，而是用非常簡單的知識點，只要懂得怎么寫JavaScript的行內樣式就可以判斷。2014-08-08
本文主要介紹了typescript返回值類型和參數類型的具體使用文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
uniapp實現app檢查更新與升級詳解(uni-upgrade-center)
UniApp是一個跨平臺的開發(fā)框架,可以同時開發(fā)iOS和Android應用,下面這篇文章主要給大家介紹了關于uniapp實現app檢查更新與升級(uni-upgrade-center)的相關資料,需要的朋友可以參考下2023-11-11
本文給大家收藏整理了ES6 Class 中的 super 關鍵字，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-10-10
這篇文章主要為大家詳細介紹了js調用刷新界面的幾種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05