原创：Js解析xml文件并简单实现省市区级联菜单(并解决各浏览器兼容性问题)....-CSDN博客

原创：Js解析xml文件并简单实现省市区级联菜单(并解决各浏览器兼容性问题).

前不久日本发生了一场惹人非议的地震中,因此也引发了中国购买食盐的狂热份子!然后又因发了一场退盐事件.然后80,90后们并没有参与其中,说明掌握科学知识的重要性.作为一名合格的大学生应该时刻保持清醒的头脑!

春天终于来了,一切都是那么的美好!期盼着这届学员每个人都能够实现自己的理想,自己这段时间为了加强学生基础,一直忙于授课也没有时间写写blog,今天终于有点时间总结一下js解析xml文件的方式,并彻底解决各个浏览器兼容性问题简单实现省市区级联菜单的简单实现,希望对同学们有所帮助.

首先我们采用是DOM （Document Object Model，文档对象模型）定义了访问和操作文档的标准方法。这里我们使用到了HTML DOM与XML DOM
1、XML DOM
XML DOM (XML Document Object Model) 定义了访问和操作 XML 文档的标准方法，DOM 把 XML 文档作为树结构来查看。能够通过 DOM 树来访问所有元素。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本，以及它们的属性，都被认为是节点
2、HTML DOM
HTML DOM (HTML Document Object Model) 定义了访问和操作 HTML 文档的标准方法。可以通过 HTML DOM 访问所有 HTML 元素。
如果您对DOM还没有掌握,请您先了解DOM相关知识,再来看看……

3、DOM 解析中的浏览器差异所有现代浏览器都支持 W3C DOM 规范。不过，浏览器之间是有差异的重要的区别有如下两点：


1、加载 XML 的方式 
 //IE浏览器
     var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 //firefox 其他浏览器
    var xmlDoc = document.implementation.createDocument("","",null);
2、处理空白和换行的方式 
  Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。
  思考: 那么怎么解决这种差异呢？
   for(var i=0;i<provinces.length;i++){
       /*解决方案:在输出所有的子节点的时候在这里判断该节点是否是元素节点
        *如果是元素节点就继续操作,否则直接进入下一个循环即可解决。
        */
       if(provinces[i].nodeType==1){ 
         }
}

备注：在这里对于opera11.01版本中进行采用本地访问时即输入的地址是：
file://D:/Workspaces/MyEclipse 8.6/20110322/WebRoot/city1.html,会出现如下bug(但对于opera11版本以下的就不存在此问题):
XMLHttpRequest to files is disabled for security reasons.
Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.
解决方案是：1、打开opera浏览器,在地址栏中输入:about:cofig
            2、在列举的首选项编辑器中找到: User Prefs
           3、点击打开User Prefs 找到里边的:Allow File XMLHttpRequest并勾选
            4、勾选上之后点击下面的保存按钮即可解决此bug;
备注：但如果采用的是http://localhost:8080/20110322/city1.html也没有此bug.

了解以上概念之后,我们就看看下面具体代码的实现：

1、首先列举出部分xml文件的代码：
    <root name="中国">
 <province name="请选择省" postcode="100000" >
    <city name="请选择市" postcode="100100" >
	  <area name="请选择区" postcode="100101" />
	</city>
  </province>
  <province name="北京市" postcode="110000" >
    <city name="市辖区" postcode="110100" >
        <area name="东城区" postcode="110101" />
        <area name="西城区" postcode="110102" />
        <area name="崇文区" postcode="110103" />
        <area name="宣武区" postcode="110104" />
        <area name="朝阳区" postcode="110105" />
        <area name="丰台区" postcode="110106" />
        <area name="石景山区" postcode="110107" />
        <area name="海淀区" postcode="110108" />
        <area name="门头沟区" postcode="110109" />
        <area name="房山区" postcode="110111" />
        <area name="通州区" postcode="110112" />
        <area name="顺义区" postcode="110113" />
        <area name="昌平区" postcode="110114" />
        <area name="大兴区" postcode="110115" />
        <area name="怀柔区" postcode="110116" />
        <area name="平谷区" postcode="110117" />
    </city>
    <city name="县" postcode="110200" >
        <area name="密云县" postcode="110228" />
        <area name="延庆县" postcode="110229" />
    </city>
  </province>
  <province name="天津市" postcode="120000" >
    <city name="市辖区" postcode="120100" >
        <area name="和平区" postcode="120101" />
        <area name="河东区" postcode="120102" />
        <area name="河西区" postcode="120103" />
        <area name="南开区" postcode="120104" />
        <area name="河北区" postcode="120105" />
        <area name="红桥区" postcode="120106" />
        <area name="塘沽区" postcode="120107" />
        <area name="汉沽区" postcode="120108" />
        <area name="大港区" postcode="120109" />
        <area name="东丽区" postcode="120110" />
        <area name="西青区" postcode="120111" />
        <area name="津南区" postcode="120112" />
        <area name="北辰区" postcode="120113" />
        <area name="武清区" postcode="120114" />
        <area name="宝坻区" postcode="120115" />
    </city>
    <city name="县" postcode="120200" >
        <area name="宁河县" postcode="120221" />
        <area name="静海县" postcode="120223" />
        <area name="蓟县" postcode="120225" />
    </city>
  </province>
   这里省略了……
</root>
2、列举出html页面中关键代码部分：
	<body>
		<div>
			<span> 
			    <select id="sheng" style="width: 100px;"></select>
			</span>

			<span> 
			   <select id="shi" style="width: 100px;"></select> 
			</span>

			<span> 
			   <select id="xian" style="width: 100px;"></select> 
			</span>
		</div>
	</body>
3、列举js代码实现部分简单实现仅供参考：
<script type="text/javascript">
<!--
//获取xmlDoc对象
function getXmlDoc(){
var xmlDoc;
  try{
     //IE浏览器
      xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
  }catch(err){
     try{
    //firefox 其他浏览器
    xmlDoc = document.implementation.createDocument("","",null);
    }catch(er){
      alert("您的浏览器实在是太低........");
    }
  }
  //关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
  xmlDoc.async=false;
  //转载xml文件
  xmlDoc.load("city.xml");
  return xmlDoc;
}

  window.onload = function (){
	   //通过方法获取对象
     var xmlDoc = getXmlDoc();
     //获取xml文件的根节点
     var root = xmlDoc.documentElement;
     //获得所有的省节点
     var provinces = root.childNodes;
     //获取页面中要显示的省的控件dom对象
     var sheng = document.getElementById("sheng");
     var shi = document.getElementById("shi");
     var xian = document.getElementById("xian");

     //遍历所有的省
     for(var i=0;i<provinces.length;i++){

    	 //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
         if(provinces[i].nodeType ==1 ){ 
        	 //创建option节点对象
           var shengopt = document.createElement("option");   
        	 //为省节点添加文本节点
           shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
           //为省节点添加属性
          shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));

           //添加省道页面dom对象中
           sheng.appendChild(shengopt);      
          }

       }

     //当省节点发生改变时 触发事件
sheng.onchange = function(){
 //获取省节点所有的option对象的集合
 var shengs = sheng.options;
 //获取选中option对象的selectedIndex(下标值)
 var num = shengs.selectedIndex;
//清空市 区   	  
 shi.length=0;
 xian.length=0;
 //根据选中的省获取其value值的内容  即xml文件中的postcode对应的值
 var ppostcode = shengs[num].getAttribute("value");
    	     //遍历所有的省
     for(var i=0;i<provinces.length;i++){

    	 //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题
         if(provinces[i].nodeType ==1 ){ 
             var postcode =  provinces[i].getAttribute("postcode");  
             if(postcode==ppostcode){
            	var cities = provinces[i].childNodes;
                shi.length=0;
            	for(var i=0;i<cities.length;i++){

            		if(cities[i].nodeType ==1){
	    			  var shiopt = document.createElement("option");
	    			   shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
	                   shiopt.setAttribute("value",cities[i].getAttribute("postcode"));
	    		       shi.appendChild(shiopt);
    		         }
    	        }
            	 break;
             }  
          }

       }

     }

shi.onchange = function(){

 var shis = shi.options;
 var num = shis.selectedIndex;

 var spostcode = shis[num].getAttribute("value");

    	     //遍历所有的省
     for(var i=0;i<provinces.length;i++){
    	 if(provinces[i].nodeType==1){
    		 var cities = provinces[i].childNodes;
    		 for(var j=0;j<cities.length;j++){
    			 if(cities[j].nodeType==1){
    				 var postcode = cities[j].getAttribute("postcode");
    				 if(postcode == spostcode){
    					 xian.length=0;
    					 var areas = cities[j].childNodes;
    					 for(var k=0;k<areas.length;k++){
    						 if(areas[k].nodeType == 1){
    							   var xianopt = document.createElement("option");
	    			               xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
	                               xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
	    		                   xian.appendChild(xianopt);
    						 }

    					 }
    					  break;
    				 }
    			 }
    		 }

    	 }
   }   
     }
  }
//-->
</script>
以上内容归redarmy_chen原创,版权归redarmy_chen所有不得随意转载 如有问题请发送邮件到redarmy_chen@qq.com