XMLDOM能很好的處理XML文檔,但是IE和Firefox等瀏覽器存在相當大的差異,此類綜合了處理方法,使之相容於各瀏覽器
本類基於XML DOM,只處理了各瀏覽器之間不相容的部份,並不能完整應用於XML處理,使用之前你必須瞭解XML DOM,相關資料請查閱網路
本類方法:
- XML.load(url) 載入XML檔案 返回XML對象
- XML.loadXML(XMLString) 載入XML字串 返回XML對象
- XML.childNodes(node) 取得一個node的子節點 返回對象數組 //主要是過濾了Firefox中討厭的空節點
- XML.xml(node) 取得一個node的格式化文本 返回string //就是IE.xml了,FF中沒有此方法
- XML.text(node) 取得一個node的值 返回string //FF中也沒有此方法
- XML.selectSingleNode(node,xpath) 利用xpath取得node下面第一個匹配的節點 返回node對象 //各有方法統一到IE的DOM中
- XML.selectNodes(node,xpath) 利用XPath取得node下面所有匹配的節點 返回node對象集 //各有方法統一到IE的DOM中
三省市聯動的樣本 <script src="jquery.js"></script>
<script src="xml.js"></script>
<style type="text/css">
select {width:150px}
</style>
<script type="text/javascript">
<!--
$(function(){
var xml=XML.load("city1.xml");
var xmldoc=xml.documentElement;//根層
var nodes=XML.selectNodes(xmldoc,"//Item[@pid='0']");//取xpath節點
for(var i=0;i<nodes.length;i++)
$("<option/>").val(nodes[i].getAttribute("id")).text(nodes[i].getAttribute("value")).appendTo($("select[name='addr1']"));
$("select[name='addr1']").change(function(){
// 聯動第二層
select_change(this.value,'addr2');
$("select[name='addr2']").change();
});
$("select[name='addr2']").change(function(){
//聯動第三層
select_change(this.value,"addr3");
});
$("select[name='addr1']").change();
$("select[name='addr2']").change();
function select_change(value,o){
$("select[name='"+o+"']").empty();
var nodes=XML.selectNodes(xmldoc,"//Item[@pid='"+value+"']");
for(var i=0;i<nodes.length;i++)
$("<option/>").val(nodes[i].getAttribute("id")).text(nodes[i].getAttribute("value")).appendTo($("select[name='"+o+"']"));
};
});
//-->
</script>
</head>
<body>
<select name="addr1"></select>
<select name="addr2"></select>
<select name="addr3"></select>
下載點這裡
示範點這裡