溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-08-24 16:38:22 來源：腳本之家 閱讀：168 作者：chengqiuming 欄目：web開發(fā)

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

一、介紹

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

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

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

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

三、代碼

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

<?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.jb51.net 獲取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>
<h2>輸出XML元素中的數(shù)據(jù)和屬性值</h2>
<!--應用onClick事件調(diào)用函數(shù)get_xml()-->
<input type="button" value="獲取XML元素的屬性值" onClick="get_xml()">
<div id="div"></div>
</body>
</html>

四、運行結(jié)果

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

注：這里使用了ActiveXObject來進行針對xml文件的操作，需要使用兼容IE的瀏覽器才能得到運行效果。否則會提示：ActiveXObject is not defined

PS：這里再為大家提供幾款關(guān)于xml操作的在線工具供大家參考使用：

在線XML/JSON互相轉(zhuǎn)換工具：
http://tools.jb51.net/code/xmljson

在線格式化XML/在線壓縮XML：
http://tools.jb51.net/code/xmlformat

XML在線壓縮/格式化工具：
http://tools.jb51.net/code/xml_format_compress

XML代碼在線格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作XML文件技巧總結(jié)》、《JavaScript文件與目錄操作技巧匯總》、《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手