JavaScript實現(xiàn)讀取與輸出XML文件數(shù)據(jù)的方法示例

更新時間：2018年06月05日 10:07:36 作者：chengqiuming

這篇文章主要介紹了JavaScript實現(xiàn)讀取與輸出XML文件數(shù)據(jù)的方法,結(jié)合實例形式分析了JavaScript基于ActiveXObject實現(xiàn)載入、讀取與輸出xml文件數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下

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

一、介紹

通過JavaScript讀取XML文檔中數(shù)據(jù)的方法很多。

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

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

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

三、代碼

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

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

然后創(chuàng)建一個index.html文件，實現(xiàn)XML元素中數(shù)據(jù)和屬性值的輸出。

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

程序代碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>www.dhdzp.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;        //獲取根節(jié)點
  employeNode=employesNode.firstChild;        //訪問根元素下的第一個節(jié)點
  numberNode=employeNode.firstChild;         //獲取number元素
  nameNode=numberNode.nextSibling;          //獲取name元素
  objectNode=nameNode.nextSibling;
  telNode=objectNode.nextSibling;
  attributes=employeNode.attributes;         //獲取employe節(jié)點的屬性集合
  attendenceperson=attributes.getNamedItem("attendence")   //獲取集合指定對象的引用
  //實現(xiàn)字符串的拼接，輸出XML文檔中的數(shù)據(jù)
  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元素中的數(shù)據(jù)和屬性值</h1>
<!--應用onClick事件調(diào)用函數(shù)get_xml()-->
<input type="button" value="獲取XML元素的屬性值" onClick="get_xml()">
<div id="div"></div>
</body>
</html>

四、運行結(jié)果