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

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

Java代码

1、加载XML的方式
//IE浏览器
varxmlDoc=newActiveXObject("Microsoft.XMLDOM");
//firefox其他浏览器
varxmlDoc=document.implementation.createDocument("","",null);
2、处理空白和换行的方式
Firefox，以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而InternetExplorer不会这样。
思考:那么怎么解决这种差异呢？
for(vari=0;i<provinces.length;i++){
/*解决方案:在输出所有的子节点的时候在这里判断该节点是否是元素节点
*如果是元素节点就继续操作,否则直接进入下一个循环即可解决。
*/
if(provinces[i].nodeType==1){
}
}
备注：在这里对于opera11.01版本中进行采用本地访问时即输入的地址是：
file://D:/Workspaces/MyEclipse8.6/20110322/WebRoot/city1.html,会出现如下bug(但对于opera11版本以下的就不存在此问题):
XMLHttpRequesttofilesisdisabledforsecurityreasons.
Set"AllowFileXMLHttpRequest"withopera:config#UserPrefs|AllowFileXMLHttpRequesttodisablethissecuritycheck.
解决方案是：1、打开opera浏览器,在地址栏中输入:about:cofig
2、在列举的首选项编辑器中找到:UserPrefs
3、点击打开UserPrefs找到里边的:AllowFileXMLHttpRequest并勾选
4、勾选上之后点击下面的保存按钮即可解决此bug;
备注：但如果采用的是http://localhost:8080/20110322/city1.html也没有此bug.
了解以上概念之后,我们就看看下面具体代码的实现：
1、首先列举出部分xml文件的代码：
<rootname="中国">
<provincename="请选择省"postcode="100000">
<cityname="请选择市"postcode="100100">
<areaname="请选择区"postcode="100101"/>
</city>
</province>
<provincename="北京市"postcode="110000">
<cityname="市辖区"postcode="110100">
<areaname="东城区"postcode="110101"/>
<areaname="西城区"postcode="110102"/>
<areaname="崇文区"postcode="110103"/>
<areaname="宣武区"postcode="110104"/>
<areaname="朝阳区"postcode="110105"/>
<areaname="丰台区"postcode="110106"/>
<areaname="石景山区"postcode="110107"/>
<areaname="海淀区"postcode="110108"/>
<areaname="门头沟区"postcode="110109"/>
<areaname="房山区"postcode="110111"/>
<areaname="通州区"postcode="110112"/>
<areaname="顺义区"postcode="110113"/>
<areaname="昌平区"postcode="110114"/>
<areaname="大兴区"postcode="110115"/>
<areaname="怀柔区"postcode="110116"/>
<areaname="平谷区"postcode="110117"/>
</city>
<cityname="县"postcode="110200">
<areaname="密云县"postcode="110228"/>
<areaname="延庆县"postcode="110229"/>
</city>
</province>
<provincename="天津市"postcode="120000">
<cityname="市辖区"postcode="120100">
<areaname="和平区"postcode="120101"/>
<areaname="河东区"postcode="120102"/>
<areaname="河西区"postcode="120103"/>
<areaname="南开区"postcode="120104"/>
<areaname="河北区"postcode="120105"/>
<areaname="红桥区"postcode="120106"/>
<areaname="塘沽区"postcode="120107"/>
<areaname="汉沽区"postcode="120108"/>
<areaname="大港区"postcode="120109"/>
<areaname="东丽区"postcode="120110"/>
<areaname="西青区"postcode="120111"/>
<areaname="津南区"postcode="120112"/>
<areaname="北辰区"postcode="120113"/>
<areaname="武清区"postcode="120114"/>
<areaname="宝坻区"postcode="120115"/>
</city>
<cityname="县"postcode="120200">
<areaname="宁河县"postcode="120221"/>
<areaname="静海县"postcode="120223"/>
<areaname="蓟县"postcode="120225"/>
</city>
</province>
这里省略了……
</root>
2、列举出html页面中关键代码部分：
<body>
<div>
<span>
<selectid="sheng"style="width:100px;"></select>
</span>
<span>
<selectid="shi"style="width:100px;"></select>
</span>
<span>
<selectid="xian"style="width:100px;"></select>
</span>
</div>
</body>
3、列举js代码实现部分简单实现仅供参考：
<scripttype="text/javascript">
<!--
//获取xmlDoc对象
functiongetXmlDoc(){
varxmlDoc;
try{
//IE浏览器
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
}catch(err){
try{
//firefox其他浏览器
xmlDoc=document.implementation.createDocument("","",null);
}catch(er){
alert("您的浏览器实在是太低........");
}
}
//关闭异步加载,确保在文档完全加载之前解析器不会继续脚本的执行
xmlDoc.async=false;
//转载xml文件
xmlDoc.load("city.xml");
returnxmlDoc;
}
window.onload=function(){
//通过方法获取对象
varxmlDoc=getXmlDoc();
//获取xml文件的根节点
varroot=xmlDoc.documentElement;
//获得所有的省节点
varprovinces=root.childNodes;
//获取页面中要显示的省的控件dom对象
varsheng=document.getElementById("sheng");
varshi=document.getElementById("shi");
varxian=document.getElementById("xian");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType==1){
//创建option节点对象
varshengopt=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对象的集合
varshengs=sheng.options;
//获取选中option对象的selectedIndex(下标值)
varnum=shengs.selectedIndex;
//清空市区
shi.length=0;
xian.length=0;
//根据选中的省获取其value值的内容即xml文件中的postcode对应的值
varppostcode=shengs[num].getAttribute("value");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
//查看该节点是否是元素节点也是为了实现不同浏览器之间的兼容性问题
if(provinces[i].nodeType==1){
varpostcode=provinces[i].getAttribute("postcode");
if(postcode==ppostcode){
varcities=provinces[i].childNodes;
shi.length=0;
for(vari=0;i<cities.length;i++){
if(cities[i].nodeType==1){
varshiopt=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(){
varshis=shi.options;
varnum=shis.selectedIndex;
varspostcode=shis[num].getAttribute("value");
//遍历所有的省
for(vari=0;i<provinces.length;i++){
if(provinces[i].nodeType==1){
varcities=provinces[i].childNodes;
for(varj=0;j<cities.length;j++){
if(cities[j].nodeType==1){
varpostcode=cities[j].getAttribute("postcode");
if(postcode==spostcode){
xian.length=0;
varareas=cities[j].childNodes;
for(vark=0;k<areas.length;k++){
if(areas[k].nodeType==1){
varxianopt=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