原创: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的方式
-
-
varxmlDoc=newActiveXObject("Microsoft.XMLDOM");
-
-
varxmlDoc=document.implementation.createDocument("","",null);
-
2、处理空白和换行的方式
- Firefox,以及其他一些浏览器,会把空的空白或换行作为文本节点来处理,而InternetExplorer不会这样。
- 思考:那么怎么解决这种差异呢?
-
for(vari=0;i<provinces.length;i++){
-
-
if(provinces[i].nodeType==1){
- }
- }
-
备注:在这里对于opera11.01版本中进行采用本地访问时即输入的地址是:
-
file:
-
XMLHttpRequesttofilesisdisabledforsecurityreasons.
-
Set"AllowFileXMLHttpRequest"withopera:config#UserPrefs|AllowFileXMLHttpRequesttodisablethissecuritycheck.
-
解决方案是:1、打开opera浏览器,在地址栏中输入:about:cofig
-
2、在列举的首选项编辑器中找到:UserPrefs
-
3、点击打开UserPrefs找到里边的:AllowFileXMLHttpRequest并勾选
-
4、勾选上之后点击下面的保存按钮即可解决此bug;
-
备注:但如果采用的是http:
- 了解以上概念之后,我们就看看下面具体代码的实现:
-
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">
- <!--
-
- functiongetXmlDoc(){
- varxmlDoc;
-
try{
-
-
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
-
}catch(err){
-
try{
-
-
xmlDoc=document.implementation.createDocument("","",null);
-
}catch(er){
-
alert("您的浏览器实在是太低........");
- }
- }
-
-
xmlDoc.async=false;
-
-
xmlDoc.load("city.xml");
-
returnxmlDoc;
- }
-
- window.onload=function(){
-
- varxmlDoc=getXmlDoc();
-
- varroot=xmlDoc.documentElement;
-
- varprovinces=root.childNodes;
-
-
varsheng=document.getElementById("sheng");
-
varshi=document.getElementById("shi");
-
varxian=document.getElementById("xian");
-
-
-
for(vari=0;i<provinces.length;i++){
-
-
-
if(provinces[i].nodeType==1){
-
-
varshengopt=document.createElement("option");
-
-
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
-
-
shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
-
-
- sheng.appendChild(shengopt);
- }
-
- }
-
- sheng.onchange=function(){
-
- varshengs=sheng.options;
-
- varnum=shengs.selectedIndex;
-
-
shi.length=0;
-
xian.length=0;
-
-
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
分享到:
相关推荐
赠送jar包:jakarta.xml.bind-api-2.3.3.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.3-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.3-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...
赠送jar包:jakarta.xml.bind-api-2.3.3.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.3-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.3-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...
Js+XML 操作应用:JS解析XML文件和XML字符串 支付接口常用,亲测可用!
省市区级联XML文件,包括IOS的area.plist省市级联文件XML
里面包含中国所有的省,省包含的所有市,市包含的所有区的xml文件,内容完整。用来xml解析做省市级联区的工具包,节点之间存在相应的联系
资源名称:使用Javascript解析xml文件或xml格式字符串 中文WORD版 内容简介: 本文档主要讲述的是使用Javascript解析xml文件或xml格式字符串;javascript中,不论是解析xml文件,...
兼容各种浏览器,解析xpath解析xml文档
赠送jar包:jakarta.xml.bind-api-2.3.2.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.2-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.2-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...
利用xml和js做的省市区级联,将最后所得值返回 注:readme里面最后一句话意思写错。 应该是:将自定义控件的AcceptControlID设置为要接收该返回值的文本框的ID。另外,运雄后可能级联没能及时出来,你在文本框里面...
利用JAVASCRIPT读取XML文件、解析
Javascript解析服务器端XML文件,成为一个树形菜单,自己工作中需要写的,想和同志们一起探讨探讨
C++实现对xml文件的解析,C++实现对xml文件的解析,C++实现对xml文件的解析。
java解析XML文件java解析XML文件java解析XML文件java解析XML文件java解析XML文件java解析XML文件
MySQLWorkbench 菜单汉化文件 main_menu.xml
jQuery解析xml文件,实现省市县三级联动下拉框
一个项目同时用dom解析和sax解析xml文件貌似会报错,项目框架建一直是用sax和dom4j解析xml文件的。当我用dom解析xml文件。导入包后就报错识别不了xml文件的编码格式。于是做了一个sax解析xml文件的实例
赠送jar包:jakarta.xml.bind-api-2.3.2.jar; 赠送原API文档:jakarta.xml.bind-api-2.3.2-javadoc.jar; 赠送源代码:jakarta.xml.bind-api-2.3.2-sources.jar; 赠送Maven依赖信息文件:jakarta.xml.bind-api-...
python解析xml文件,python语言解析xml文件的常用的有两种方式: 通过MiniDom库解析xml文件 通过ElementTree库解析xml文件
js解析xml文件的完整代码 完整的代码,我写了一天的时间,应该值得你看
city.xml(完整版) 博文链接:https://javawangli.iteye.com/blog/970929