JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)
本文實(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)在我需要對這個(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文件對象出來了, 接下去我就要對這個(gè)文檔進(jìn)行操作了.
比如說,我們現(xiàn)在需要得到節(jié)點(diǎn)Login/Weapon/W的第一個(gè)節(jié)點(diǎn)的屬性,那么我們可以如下進(jìn)行.
// 首先對xml對象進(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)的方法對節(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 對象解析 XML 文本并返回一個(gè) XML Document 對象。
* 要使用 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;
}
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript XMLHttpRequest對象全面剖析
- JS解析XML的實(shí)現(xiàn)代碼
- javascript 讀取XML數(shù)據(jù),在頁面中展現(xiàn)、編輯、保存的實(shí)現(xiàn)
- JS解析XML文件和XML字符串詳解
- JavaScript 解析讀取XML文檔 實(shí)例代碼
- js字符串轉(zhuǎn)換成xml對象并使用技巧解讀
- javascript解析xml字符串的函數(shù)
- JS讀取XML文件示例代碼
- javascript 讀取xml,寫入xml 實(shí)現(xiàn)代碼
- 使用JS讀取XML文件的方法
- JS操作XML中DTD介紹及使用方法分析
相關(guān)文章
js實(shí)現(xiàn)的常用的左側(cè)導(dǎo)航效果
使用js簡單實(shí)現(xiàn)下常用的左側(cè)導(dǎo)航效果為提高導(dǎo)航性能而生,各位朋友可以參考應(yīng)用,希望對大家有所幫助2013-10-10
js實(shí)現(xiàn)ArrayList功能附實(shí)例代碼
ArrayList功能想必大家都有所了解吧,本文使用js實(shí)現(xiàn)ArrayList功能并附實(shí)例代碼,想學(xué)習(xí)的朋友可以看看2014-10-10
Javascript數(shù)組的排序 sort()方法和reverse()方法
JavaScript提供了sort()方法和reverse()方法,使得我們可以簡單的對數(shù)組進(jìn)行排序操作和逆序操作2012-06-06
父頁面iframe中的第三方子頁面跨域交互技術(shù)—postMessage實(shí)現(xiàn)方法
web網(wǎng)站通過iframe嵌入第三方web頁面,父頁面和子頁面如果需要數(shù)據(jù)交互,顯然違反了同源策略,在HTML5標(biāo)準(zhǔn)引入的window對象下的postMessage方法,可以允許來自不同源的JavaScript腳本采用異步方式進(jìn)行有限的通信,可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞...2023-06-06
Bootstrap 折疊(Collapse)插件用法實(shí)例詳解
這篇文章主要介紹了Bootstrap 折疊(Collapse)插件用法實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-06-06

