怎樣使用JavaScript操作XML數據據

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

//載入文檔
//doc.load("b.xml");

//建立檔案頭
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");

//添加檔案頭
doc.appendChild(p);

//用於直接載入時獲得根接點
//var root = doc.documentElement;

//兩種方式建立根接點
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");

//建立子接點
var n = doc.createNode(1,"ttyp","");

//指定子接點文本
//n.text = " this is a test";

//建立孫接點
var o = doc.createElement("sex");
o.text = "男"; //指定其文本

//建立屬性
var r = doc.createAttribute("id");
r.value="test";

//添加屬性
n.setAttributeNode(r);

//建立第二個屬性
var r1 = doc.createAttribute("class");
r1.value="tt";

//添加屬性
n.setAttributeNode(r1);

//刪除第二個屬性
n.removeAttribute("class");

//添加孫接點
n.appendChild(o);

//添加文本接點
n.appendChild(doc.createTextNode("this is a text node."));

//添加註釋
n.appendChild(doc.createComment("this is a comment/n"));

//添加子接點
root.appendChild(n);

//複製接點
var m = n.cloneNode(true);

root.appendChild(m);

//刪除接點
root.removeChild(root.childNodes(0));

//建立資料區段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加資料區段
root.appendChild(c);

//添加根接點
doc.appendChild(root);

//尋找接點
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");

//顯示改接點的屬性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}

//XML儲存（需要在服務端，用戶端用FSO）
//doc.save();

//查看根接點XML
if(n)
{
alert(n.ownerDocument.xml);
}

//-->
</script>

執行個體1：利用xml資料島分頁.htm
************************************************
<xml id="users">
<userGroup>
<user>
<userid>user 1</userid>
<name>name 1</name>
</user>
<user>
<userid>user 2</userid>
<name>name 2</name>
</user>
<user>
<userid>user 3</userid>
<name>name 3</name>
</user>
<user>
<userid>user 4</userid>
<name>name 4</name>
</user>
<user>
<userid>user 5</userid>
<name>name 5</name>
</user>
<user>
<userid>user 6</userid>
<name>name 7</name>
</user>
<user>
<userid>user 7</userid>
<name>name 7</name>
</user>
<user>
<userid>user 8</userid>
<name>name 8</name>
</user>
<user>
<userid>user 9</userid>
<name>name 9</name>
</user>
</userGroup>
</xml>
<table id="datatable" datasrc="#users" DATAPAGESIZE="3" width="400" border="1">
<tr>
<td><span datafld="userid"></span></td>
<td><span datafld="name"></span></td>
</tr>
</table>
<button onclick="document.all.datatable.previousPage()">Previous Page</button>
<button onclick="document.all.datatable.nextPage()">Next Page</button>
************************************************

執行個體2：xml資料島執行個體1.htm
************************************************
<HTML>
<HEAD><Title>HTML中的資料島中的記錄集</Title></HEAD>
<body bkcolor=#EEEEEE text=blue bgcolor="#00FFFF">
<Table align=center width="100%"><TR><TD align="center">
<h5><b><font size="4" color="#FF0000">HTML中的XML資料島記錄編輯與添加</font></b></h5>
</TD></TR></Table>
<HR>
酒店名稱：<input type=text datasrc=#theXMLisland DataFLD=NAME size="76"><BR>
　　地址：<input type=text datasrc=#theXMLisland DataFLD=Address size="76"><BR>
　　首頁：<input type=text datasrc=#theXMLisland DataFLD=HomePage size="76"><BR>
電子郵件：<input type=text datasrc=#theXMLisland DataFLD=E-Mail size="76"><BR>
　　電話：<input type=text datasrc=#theXMLisland DataFLD=TelePhone size="76"><BR>
　　層級：<input type=text datasrc=#theXMLisland DataFLD=Grade size="76"><HR>
<input id="first" TYPE=button value="<<　第一條記錄" onclick="theXMLisland.recordset.moveFirst()">
<input id="prev" TYPE=button value="<上一條記錄" onclick="theXMLisland.recordset.movePrevious()">
<input id="next" TYPE=button value="下一條記錄>" onclick="theXMLisland.recordset.moveNext()">
<input id="last" TYPE=button value="最後一條記錄>>" onclick="theXMLisland.recordset.moveLast()"> 
<input id="Add" TYPE=button value="添加新記錄" onclick="theXMLisland.recordset.addNew()">

<XML ID="theXMLisland">
<HotelList>
<Hotel>
<Name>四海大酒店</Name>
<Address>海魂路1號</Address>
<HomePage>www.sihaohotel.com.cn</HomePage>
<E-Mail>master@sihaohotel.com.cn</E-Mail>
<TelePhone>(0989)8888888</TelePhone>
<Grade>五星級</Grade>
</Hotel>
<Hotel>
<Name>五湖賓館</Name>
<Address>東平路99號</Address>
<HomePage>www.wuhu.com.cn</HomePage>
<E-Mail>web@wuhu.com.cn</E-Mail>
<TelePhone>(0979)1111666</TelePhone>
<Grade>四星級</Grade>
</Hotel>
<Hotel>
<Name>“大沙漠”賓館</Name>
<Address>留香路168號</Address>
<HomePage>www.dashamohotel.com.cn</HomePage>
<E-Mail>master@dashamohotel.com.cn</E-Mail>
<TelePhone>(0989)87878788</TelePhone>
<Grade>五星級</Grade>
</Hotel>
<Hotel>
<Name>“畫眉鳥”大酒店</Name>
<Address>血海飄香路2號</Address>
<HomePage>www.throstlehotel.com.cn</HomePage>
<E-Mail>chuliuxiang@throstlehotel.com.cn</E-Mail>
<TelePhone>(099)9886666</TelePhone>
<Grade>五星級</Grade>
</Hotel>
</HotelList>
</XML>
</body>
</HTML>
************************************************

執行個體3：XML連動表單.htm
************************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>無標題文檔</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript1.2">
function ChooseState()
{
var source;
var sourceName = "Citys.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //建立一個MSXML解析器執行個體
source.async = false;
source.load(sourceName); //裝入XML文檔
root = source.documentElement; //設定文件項目為根節點元素
sortField=root.selectNodes("//@name"); //搜尋屬性中含有name的所有節點
for(var i=0;i<sortField.length;++i) //增加省份名稱到下拉式清單
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
ChooseCity();
}

//自訂函數：ChooseCity
//(根據當前選定的省名來讀取XML資料中的對應城市名稱，並增加到SelCity的下拉式清單中)
function ChooseCity()
{
x=form1.SelState.selectedIndex; //讀取省份下拉框的當前選項
y=form1.SelState.options[x].value;
sortField=root.selectNodes("//State[@name='"+y+"']/City"); //搜尋name屬性值等於參數y的State節點下的所有city節點
for(var i=form1.SelCity.options.length-1;i>=0;--i) //撤消原來的清單項目
{
form1.SelCity.options.remove(i)
}
for(var i=0;i<sortField.length;++i) //增加城市名稱到下拉式清單
{
var oOption = document.createElement('OPTION');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
</script>
</head>

附 Citys.xml
<?xml version="1.0" encoding="gb2312"?>
<China>
<State id="1" name="江西">
<City>九江</City>
<City>南昌</City>
<City>廬山</City>
<City>景德鎮</City>
</State>
<State id="2" name="北京">
<City>北京西</City>
<City>居庸關</City>
<City>清華園</City>
<City>周口店</City>
</State>
<State id="3" name="福建">
<City>福州</City>
<City>廈門</City>
<City>漳州</City>
</State>
<State id="4" name="甘肅">
<City>蘭州</City>
<City>洛門</City>
<City>嘉峪關</City>
</State>
<State id="5" name="廣東">
<City>廣州</City>
<City>深圳</City>
<City>東莞</City>
<City>石牌</City>
</State>
<State id="6" name="安徽">
<City>合肥</City>
<City>黃山</City>
<City>九龍崗</City>
<City>馬鞍山</City>
</State>
</China>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More