现在的位置: 首页 > 综合 > 正文

[原]JavaScript 读取XML 通用类 兼容IE与众浏览器

2013年03月05日 ⁄ 综合 ⁄ 共 1731字 ⁄ 字号 评论关闭

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>

 

下载点这里

演示点这里

抱歉!评论已关闭.