JavaScript實現讀取與輸出XML文件數據的方法示例

2019-11-19 13:43:08

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript實現讀取與輸出XML文件數據的方法。分享給大家供大家參考，具體如下：

一、介紹

通過JavaScript讀取XML文檔中數據的方法很多。

其根本的思路就是：首先在后臺加載XML文檔，然后通過JavaScript獲取文檔中所需的數據，最后應用HTML展示獲取的數據。

二、獲取XML元素的屬性值的應用

下面應用attributes屬性和getNamedItem()方法獲取一個指定的XML文檔中的屬性值。

三、代碼

首先創建一個XML文檔，并且為指定的元素設置屬性，程序代碼如下：

<?xml version="1.0" encoding="GB2312"?><employes>  <employe id='1' attendence='經理'>    <number>1001</number>    <name>程**</name>    <object>PHP</object>    <tel>84971547</tel>    <address>長春市</address>    <e_mail>cak**@sina.com</e_mail>  </employe></employes>

然后創建一個index.html文件，實現XML元素中數據和屬性值的輸出。

獲取employe元素的引用，通過attributes獲取employe元素的屬性集合，用getNamedItem()方法獲取集合attributes中attendence對象的引用，并將其賦值給變量attendenceperson。最后通過字符串的拼接實現XML文檔中數據和屬性值的輸出，這里獲取的屬性值為“經理”。

程序代碼如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>m.survivalescaperooms.com 獲取XML元素的屬性值</title></head><script>function get_xml(){  var xmldoc,employesNode,employeNode;        //定義變量  var nameNode,titleNode,numberNode,displayText;   //定義變量  var attributes,attendenceperson  xmldoc = new ActiveXObject("Microsoft.XMLDOM");  xmldoc.async = false;  xmldoc.load("index.xml"); //載入指定的XML文檔  employesNode=xmldoc.documentElement;        //獲取根節點  employeNode=employesNode.firstChild;        //訪問根元素下的第一個節點  numberNode=employeNode.firstChild;         //獲取number元素  nameNode=numberNode.nextSibling;          //獲取name元素  objectNode=nameNode.nextSibling;  telNode=objectNode.nextSibling;  attributes=employeNode.attributes;         //獲取employe節點的屬性集合  attendenceperson=attributes.getNamedItem("attendence")   //獲取集合指定對象的引用  //實現字符串的拼接，輸出XML文檔中的數據  displayText="員工信息:"+numberNode.firstChild.nodeValue+','+nameNode.firstChild.nodeValue+', '+objectNode. firstChild.nodeValue+','+telNode.firstChild.nodeValue+"<br>職務:"+attendenceperson.value;  div.innerHTML=displayText; //指定在ID標識為div的<div>標簽中輸出字符串displayText的信息}</script><body><h1>輸出XML元素中的數據和屬性值</h1><!--應用onClick事件調用函數get_xml()--><input type="button" value="獲取XML元素的屬性值" onClick="get_xml()"><div id="div"></div></body></html>

四、運行結果