最近一個項目中要用到樹形列表,本來是用mztree的,但數據用了xml,本來xml就是樹形目錄,就打算用Javascript直接解析XML文件了,網上找到一些JavaScript操作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文件,JavaScript中加載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文件對象出來了, 接下去我就要對這個文檔進行操作了。
比如說,我們現在需要得到節點Login/Weapon/W的第一個節點的屬性,那麼我們可以如下進行：
// 首先對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的第一個節點的屬性值
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,可以得到這個節點的名稱；
◆ xmlDoc.documentElement.childNodes(0).nodeValue,可以得到這個節點的值. 這個值是來自於這樣子的XML格式：＜a＞b＜/b＞, 於是可以得到b這個值；
◆ XMLDoc.documentElement.childNodes(0).hasChild,可以判斷是否有子節點。
根據我的經驗,最好是使用getElementsByTagName(xPath)的方法對節點進行訪問,因為這樣子可以直接通過xPath來定位節點,這樣子會有更好的性能。