快捷導(dǎo)航

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

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

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

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

一、介紹

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

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

二、獲取XML元素的屬性值的應(yīng)用

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

三、代碼

首先創(chuàng)建一個(gè)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>長(zhǎng)春市</address>
    <e_mail>cak**@sina.com</e_mail>
  </employe>
</employes>

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

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

程序代碼如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>www.dbjr.com.cn 獲取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é)點(diǎn)
  employeNode=employesNode.firstChild;        //訪問(wèn)根元素下的第一個(gè)節(jié)點(diǎn)
  numberNode=employeNode.firstChild;         //獲取number元素
  nameNode=numberNode.nextSibling;          //獲取name元素
  objectNode=nameNode.nextSibling;
  telNode=objectNode.nextSibling;
  attributes=employeNode.attributes;         //獲取employe節(jié)點(diǎn)的屬性集合
  attendenceperson=attributes.getNamedItem("attendence")   //獲取集合指定對(duì)象的引用
  //實(shí)現(xiàn)字符串的拼接，輸出XML文檔中的數(shù)據(jù)
  displayText="員工信息:"+numberNode.firstChild.nodeValue+','+nameNode.firstChild.nodeValue+', '+objectNode. firstChild.nodeValue+','+telNode.firstChild.nodeValue+"<br>職務(wù):"+attendenceperson.value;
  div.innerHTML=displayText; //指定在ID標(biāo)識(shí)為div的<div>標(biāo)簽中輸出字符串displayText的信息
}
</script>
<body>
<h1>輸出XML元素中的數(shù)據(jù)和屬性值</h1>
<!--應(yīng)用onClick事件調(diào)用函數(shù)get_xml()-->
<input type="button" value="獲取XML元素的屬性值" onClick="get_xml()">
<div id="div"></div>
</body>
</html>

四、運(yùn)行結(jié)果