首先,我們需要載入這個xml檔案,js中載入xml檔案,是通過XMLDOM來進行的.
| 代碼如下 |
複製代碼 |
<?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> htm
<html>
<head>
<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>
</head>
<body>
</body>
</html> |
使用方法
| 代碼如下 |
複製代碼 |
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; } |
執行個體
| 代碼如下 |
複製代碼 |
<html>
<head>
<script type="text/javascript">
function parseXML()
{
text="<note>";
text=text+"<to>George</to>";
text=text+"<from>John</from>";
text=text+"<heading>Reminder</heading>";
text=text+"<body>Don't forget the meeting!</body>";
text=text+"</note>";
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
catch(e)
{
alert(e.message);
return;
}
}
document.getElementById("to").innerHTML=xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
}
</script>
</head> <body onload="parseXML()">
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span>
<b>From:</b> <span id="from"></span>
<b>Message:</b> <span id="message"></span>
</p>
</body>
</html> |
友情提示如果是解析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的字串；
* 第二個參數是包含文檔根項目名稱的字串；
* 第三個參數是要建立的文件類型（也稱為doctype）
*/
xmlDoc = document.implementation.createDocument('','',null);
}catch(e){
}
}
else{
return null;
} if(xmlDoc!=null){
xmlDoc.async = false;
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
</script> |
可以通過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來定位節點,這樣子會有更好的效能.
