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

转载地址：http://blog.youkuaiyun.com/redarmy_chen/article/details/6520693

首先我们采用是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 规范。不过，浏览器之间是有差异的重要的区别有如下两点：

Java代码   

1. 1、加载 XML 的方式    
2.  //IE浏览器   
3.      var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
4.  //firefox 其他浏览器   
5.     var xmlDoc = document.implementation.createDocument("","",null);   
6. 2、处理空白和换行的方式    
7.   Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。   
8.   思考: 那么怎么解决这种差异呢？   
9.    for(var i=0;i<provinces.length;i++){   
10.        /*解决方案:在输出所有的子节点的时候在这里判断该节点是否是元素节点  
11.         *如果是元素节点就继续操作,否则直接进入下一个循环即可解决。  
12.         */  
13.        if(provinces[i].nodeType==1){    
14.          }   
15. }   
16.   
17. 备注：在这里对于opera11.01版本中进行采用本地访问时即输入的地址是：   
18. file://D:/Workspaces/MyEclipse 8.6/20110322/WebRoot/city1.html,会出现如下bug(但对于opera11版本以下的就不存在此问题):   
19. XMLHttpRequest to files is disabled for security reasons.   
20. Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.   
21. 解决方案是：1、打开opera浏览器,在地址栏中输入:about:cofig   
22.             2、在列举的首选项编辑器中找到: User Prefs   
23.            3、点击打开User Prefs 找到里边的:Allow File XMLHttpRequest并勾选   
24.             4、勾选上之后点击下面的保存按钮即可解决此bug;   
25. 备注：但如果采用的是http://localhost:8080/20110322/city1.html也没有此bug.   
26.   
27. 了解以上概念之后,我们就看看下面具体代码的实现：   
28.   
29. 1、首先列举出部分xml文件的代码：   
30.     <root name="中国">   
31.  <province name="请选择省" postcode="100000" >   
32.     <city name="请选择市" postcode="100100" >   
33.       <area name="请选择区" postcode="100101" />   
34.     </city>   
35.   </province>   
36.   <province name="北京市" postcode="110000" >   
37.     <city name="市辖区" postcode="110100" >   
38.         <area name="东城区" postcode="110101" />   
39.         <area name="西城区" postcode="110102" />   
40.         <area name="崇文区" postcode="110103" />   
41.         <area name="宣武区" postcode="110104" />   
42.         <area name="朝阳区" postcode="110105" />   
43.         <area name="丰台区" postcode="110106" />   
44.         <area name="石景山区" postcode="110107" />   
45.         <area name="海淀区" postcode="110108" />   
46.         <area name="门头沟区" postcode="110109" />   
47.         <area name="房山区" postcode="110111" />   
48.         <area name="通州区" postcode="110112" />   
49.         <area name="顺义区" postcode="110113" />   
50.         <area name="昌平区" postcode="110114" />   
51.         <area name="大兴区" postcode="110115" />   
52.         <area name="怀柔区" postcode="110116" />   
53.         <area name="平谷区" postcode="110117" />   
54.     </city>   
55.     <city name="县" postcode="110200" >   
56.         <area name="密云县" postcode="110228" />   
57.         <area name="延庆县" postcode="110229" />   
58.     </city>   
59.   </province>   
60.   <province name="天津市" postcode="120000" >   
61.     <city name="市辖区" postcode="120100" >   
62.         <area name="和平区" postcode="120101" />   
63.         <area name="河东区" postcode="120102" />   
64.         <area name="河西区" postcode="120103" />   
65.         <area name="南开区" postcode="120104" />   
66.         <area name="河北区" postcode="120105" />   
67.         <area name="红桥区" postcode="120106" />   
68.         <area name="塘沽区" postcode="120107" />   
69.         <area name="汉沽区" postcode="120108" />   
70.         <area name="大港区" postcode="120109" />   
71.         <area name="东丽区" postcode="120110" />   
72.         <area name="西青区" postcode="120111" />   
73.         <area name="津南区" postcode="120112" />   
74.         <area name="北辰区" postcode="120113" />   
75.         <area name="武清区" postcode="120114" />   
76.         <area name="宝坻区" postcode="120115" />   
77.     </city>   
78.     <city name="县" postcode="120200" >   
79.         <area name="宁河县" postcode="120221" />   
80.         <area name="静海县" postcode="120223" />   
81.         <area name="蓟县" postcode="120225" />   
82.     </city>   
83.   </province>   
84.    这里省略了……   
85. </root>   
86. 2、列举出html页面中关键代码部分：   
87.     <body>   
88.         <div>   
89.             <span>    
90.                 <select id="sheng" style="width: 100px;"></select>   
91.             </span>   
92.                
93.             <span>    
94.                <select id="shi" style="width: 100px;"></select>    
95.             </span>   
96.   
97.             <span>    
98.                <select id="xian" style="width: 100px;"></select>    
99.             </span>   
100.         </div>   
101.     </body>   
102. 3、列举js代码实现部分简单实现仅供参考：   
103. <script type="text/javascript">   
104. <!--   
105. //获取xmlDoc对象   
106. function getXmlDoc(){   
107. var xmlDoc;   
108.   try{   
109.      //IE浏览器   
110.       xmlDoc = new ActiveXObject("Microsoft.XMLDOM");   
111.   }catch(err){   
112.      try{   
113.     //firefox 其他浏览器   
114.     xmlDoc = document.implementation.createDocument("","",null);   
115.     }catch(er){   
116.       alert("您的浏览器实在是太低........");   
117.     }   
118.   }   
119.   //关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行   
120.   xmlDoc.async=false;   
121.   //转载xml文件   
122.   xmlDoc.load("city.xml");   
123.   return xmlDoc;   
124. }   
125.      
126.   window.onload = function (){   
127.        //通过方法获取对象   
128.      var xmlDoc = getXmlDoc();   
129.      //获取xml文件的根节点   
130.      var root = xmlDoc.documentElement;   
131.      //获得所有的省节点   
132.      var provinces = root.childNodes;   
133.      //获取页面中要显示的省的控件dom对象   
134.      var sheng = document.getElementById("sheng");   
135.      var shi = document.getElementById("shi");   
136.      var xian = document.getElementById("xian");   
137.         
138.      //遍历所有的省   
139.      for(var i=0;i<provinces.length;i++){   
140.             
141.          //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题   
142.          if(provinces[i].nodeType ==1 ){    
143.              //创建option节点对象   
144.            var shengopt = document.createElement("option");      
145.              //为省节点添加文本节点   
146.            shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));   
147.            //为省节点添加属性   
148.           shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));   
149.              
150.            //添加省道页面dom对象中   
151.            sheng.appendChild(shengopt);         
152.           }   
153.               
154.        }   
155.   
156.      //当省节点发生改变时 触发事件   
157. sheng.onchange = function(){   
158.  //获取省节点所有的option对象的集合   
159.  var shengs = sheng.options;   
160.  //获取选中option对象的selectedIndex(下标值)   
161.  var num = shengs.selectedIndex;   
162. //清空市 区          
163.  shi.length=0;   
164.  xian.length=0;   
165.  //根据选中的省获取其value值的内容  即xml文件中的postcode对应的值   
166.  var ppostcode = shengs[num].getAttribute("value");   
167.              //遍历所有的省   
168.      for(var i=0;i<provinces.length;i++){   
169.             
170.          //查看该节点是否是元素节点 也是为了实现不同浏览器之间的兼容性问题   
171.          if(provinces[i].nodeType ==1 ){    
172.              var postcode =  provinces[i].getAttribute("postcode");     
173.              if(postcode==ppostcode){   
174.                 var cities = provinces[i].childNodes;   
175.                 shi.length=0;   
176.                 for(var i=0;i<cities.length;i++){   
177.                  
178.                     if(cities[i].nodeType ==1){   
179.                       var shiopt = document.createElement("option");   
180.                        shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));   
181.                        shiopt.setAttribute("value",cities[i].getAttribute("postcode"));   
182.                        shi.appendChild(shiopt);   
183.                      }   
184.                 }   
185.                  break;   
186.              }     
187.           }   
188.               
189.        }   
190.        
191.      }   
192.   
193. shi.onchange = function(){   
194.     
195.  var shis = shi.options;   
196.  var num = shis.selectedIndex;   
197.              
198.  var spostcode = shis[num].getAttribute("value");   
199.               
200.              //遍历所有的省   
201.      for(var i=0;i<provinces.length;i++){   
202.          if(provinces[i].nodeType==1){   
203.              var cities = provinces[i].childNodes;   
204.              for(var j=0;j<cities.length;j++){   
205.                  if(cities[j].nodeType==1){   
206.                      var postcode = cities[j].getAttribute("postcode");   
207.                      if(postcode == spostcode){   
208.                          xian.length=0;   
209.                          var areas = cities[j].childNodes;   
210.                          for(var k=0;k<areas.length;k++){   
211.                              if(areas[k].nodeType == 1){   
212.                                    var xianopt = document.createElement("option");   
213.                                    xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));   
214.                                    xianopt.setAttribute("value",areas[k].getAttribute("postcode"));   
215.                                    xian.appendChild(xianopt);   
216.                              }   
217.                                
218.                          }   
219.                           break;   
220.                      }   
221.                  }   
222.              }   
223.                 
224.          }   
225.    }      
226.      }   
227.   }   
228. //-->   
229. </script>