JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)

更新時(shí)間：2015年12月08日 10:03:37 作者：仰天一笑

這篇文章主要介紹了JS操作XML的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript加載與解析XML文件及字符串的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了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>

現(xiàn)在我需要對(duì)這個(gè)xml文件的內(nèi)容進(jìn)行操作.

首先,我們需要加載這個(gè)xml文件,js中加載xml文件,是通過XMLDOM來進(jìn)行的.

// 加載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文件對(duì)象出來了, 接下去我就要對(duì)這個(gè)文檔進(jìn)行操作了.

比如說,我們現(xiàn)在需要得到節(jié)點(diǎn)Login/Weapon/W的第一個(gè)節(jié)點(diǎn)的屬性,那么我們可以如下進(jìn)行.

// 首先對(duì)xml對(duì)象進(jìn)行判斷
checkXMLDocObj = function(xmlFile)
{
 var xmlDoc = loadXML(xmlFile);
 if(xmlDoc==null)
 {
 alert('您的瀏覽器不支持xml文件讀取,于是本頁面禁止您的操作,推薦使用IE5.0以上可以解決此問題!');
 window.location.href='/Index.aspx';
 }
 return xmlDoc;
}
// 然后開始獲取需要的Login/Weapon/W的第一個(gè)節(jié)點(diǎn)的屬性值
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var v = xmlDoc.getElementsByTagName('Login/Weapon/W')[0].childNodes.getAttribute('Text')

而我在我的程序中的寫法是這樣子的,當(dāng)然我在程序中的寫法是已經(jīng)應(yīng)用到實(shí)際中的了.一并給出來,以供查看

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)來進(jìn)行的.
還可以通過xmlDoc.documentElement.childNodes(1)..childNodes(0).getAttribute('Text')進(jìn)行訪問.

一些常用方法:

xmlDoc.documentElement.childNodes(0).nodeName,可以得到這個(gè)節(jié)點(diǎn)的名稱.
xmlDoc.documentElement.childNodes(0).nodeValue,可以得到這個(gè)節(jié)點(diǎn)的值. 這個(gè)值是來自于這樣子的xml格式:<a>b</b>, 于是可以得到b這個(gè)值.
xmlDoc.documentElement.childNodes(0).hasChild,可以判斷是否有子節(jié)點(diǎn)
根據(jù)我的經(jīng)驗(yàn),最好是使用getElementsByTagName(xPath)的方法對(duì)節(jié)點(diǎn)進(jìn)行訪問,因?yàn)檫@樣子可以直接通過xPath來定位節(jié)點(diǎn),這樣子會(huì)有更好的性能.

補(bǔ)充：

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;
}

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: