您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > [原]JavaScript 讀取XML 通用類 兼容IE與眾瀏覽器
[原]JavaScript 讀取XML 通用類 兼容IE與眾瀏覽器
文章來源：365jz.com 點(diǎn)擊數(shù)：630 更新時(shí)間：2009-09-16 11:35 參與評論
XMLDOM能很好的處理XML文檔，但是IE和Firefox等瀏覽器存在相當(dāng)大的差異，此類綜合了處理方法，使之兼容于各瀏覽器
本類基于XML DOM，只處理了各瀏覽器之間不兼容的部份，并不能完整應(yīng)用于XML處理，使用之前你必須了解XML DOM，相關(guān)資料請查閱網(wǎng)絡(luò)
本類方法：
- XML.load(url) 載入XML文件 返回XML對象
- XML.loadXML(XMLString) 載入XML字串 返回XML對象
- XML.childNodes(node) 取得一個(gè)node的子節(jié)點(diǎn) 返回對象數(shù)組 //主要是過濾了Firefox中討厭的空節(jié)點(diǎn)
- XML.xml(node) 取得一個(gè)node的格式化文本 返回string //就是IE.xml了，F(xiàn)F中沒有此方法
- XML.text(node) 取得一個(gè)node的值 返回string //FF中也沒有此方法
- XML.selectSingleNode(node,xpath) 利用xpath取得node下面第一個(gè)匹配的節(jié)點(diǎn) 返回node對象 //各有方法統(tǒng)一到IE的DOM中
- XML.selectNodes(node,xpath) 利用XPath取得node下面所有匹配的節(jié)點(diǎn) 返回node對象集 //各有方法統(tǒng)一到IE的DOM中
三省市聯(lián)動(dòng)的示例
<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節(jié)點(diǎn)
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(){
// 聯(lián)動(dòng)第二層
select_change(this.value,'addr2');
$("select[name='addr2']").change();
});
$("select[name='addr2']").change(function(){
//聯(lián)動(dòng)第三層
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>
<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節(jié)點(diǎn)
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(){
// 聯(lián)動(dòng)第二層
select_change(this.value,'addr2');
$("select[name='addr2']").change();
});
$("select[name='addr2']").change(function(){
//聯(lián)動(dòng)第三層
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>
下載點(diǎn)這里
演示點(diǎn)這里
Tag標(biāo)簽: xml,標(biāo)準(zhǔn)
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
------分隔線----------------------------
