[原]JavaScript 读取XML 通用类 兼容IE与众浏览器
文章来源：365jz.com 点击数：619 更新时间：2009-09-16 11:35 参与评论
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>
<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>
下载点这里
演示点这里
Tag标签: xml,标准
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
- 上一篇：Jquery.Messager插件 相关
- 下一篇：JQuery制作简单选择时间控件
