原创：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
分享到：
技术全面
相关推荐
JS 解析 XML 文件 作为一名 IT 行业大师，我将从给定的...使用 JavaScript 解析 XML 文件需要了解 XML 文档的结构和各个节点的类型，选择合适的解析方法，考虑浏览器兼容性问题，并掌握相关的 JavaScript 语法和方法。
在这个示例中，它被用来实现省市区级联菜单，即当用户选择一个省份时，城市列表会动态更新；接着选择城市后，县区列表也会随之变化。这个功能在很多网站的地址输入、配送范围设定等场景中非常常见。 首先，我们来看...
本文将深入探讨如何使用JavaScript在服务器端解析XML文件，并将其转化为树形菜单，以供用户交互。 首先，理解XML的基本结构至关重要。XML是一种自描述性的文本格式，通过标签来定义数据结构。例如： ```xml ...
不过，需要注意的是，汉化文件的兼容性问题，不同的MySQLWorkbench版本可能需要对应的`main_menu.xml`，所以确保使用与软件版本匹配的汉化文件是很重要的。 总的来说，通过修改和应用`main_menu.xml`文件，我们可以...
在IT行业中，省市区级联通常是指在一个网页表单中，用户在选择省份后，下拉菜单会自动更新为对应省份的城市，接着选择城市后，再显示该城市下的区县。这种功能常用于地址填写、物流配送等场景，极大地提高了用户体验...
- **浏览器兼容性**：描述中提到的谷歌浏览器的XML解析问题可能是指某些特定的XML字符处理不正确，或者某些解析方法在特定版本的Chrome中不工作。开发者需要关注浏览器兼容性，确保在多种环境下都能正常解析。 5. ...
在JavaScript中解析XML文件是一项常见的任务，特别是在处理服务器返回的数据或者构建富客户端应用时。XML（eXtensible Markup Language）是一种结构化数据格式，它允许我们存储和传输信息，而JavaScript作为浏览器中...
里面包含中国所有的省，省包含的所有市，市包含的所有区的xml文件，内容完整。用来xml解析做省市级联区的工具包，节点之间存在相应的联系
在JavaScript（JS）中解析XML（可扩展标记语言）是一项常见的任务，特别是在处理与服务器交换数据的Web应用程序中。XML是一种结构化数据格式，广泛用于存储和传输信息。然而，不同的浏览器可能支持不同的方法来解析...
本项目"js解析xml生成菜单"是结合这两种技术，创建一个适用于IE和Firefox浏览器的动态导航菜单系统，具有良好的可扩展性，能够实现无限级别的子菜单。 首先，我们要理解XML（Extensible Markup Language）的本质。...
标题"Asp.net+Js实现的全国最新省市区级联"表明这是一个使用ASP.NET技术和JavaScript（Js）开发的项目，其主要功能是实现一个动态的、实时更新的省级、市级和区县级的选择联动效果。这种级联选择通常用于地理信息...
在JavaScript中解析XML文件并以目录树的形式在网页上展示是一项常见的任务，特别是在处理结构化数据或者构建动态网页时。这个任务涉及到JavaScript的核心知识、DOM操作以及XML处理。以下是一些关键知识点： 1. **...
在JavaScript中，解析XML文档并将其转换为树形菜单是一项常见的任务，特别是在处理动态数据或构建自定义导航结构时。这篇博客（林诗权在iteye上的博客288976）可能详细介绍了如何利用JavaScript的核心API以及可能的...
- `distpicker.js`：JavaScript库，实现省市县级联菜单的逻辑。 - `distpicker.css`：样式表文件，定义菜单的外观。 - `index.html`：示例HTML页面，展示如何使用这个库。 - `data.json`：可能包含省市区县的数据...
利用xml和js做的省市区级联，将最后所得值返回 注：readme里面最后一句话意思写错。 应该是：将自定义控件的AcceptControlID设置为要接收该返回值的文本框的ID。另外，运雄后可能级联没能及时出来，你在文本框里面...
本文将深入探讨使用C语言编写的XML文件解析源码，并讲解如何实现XML文件的基本操作，如查找、增加和删除节点。 在C语言中处理XML文件通常涉及到以下几个关键步骤： 1. **内存管理**：由于C语言没有内置的高级数据...
在Java编程环境中，解析XML文件是一项常见的任务，特别是在数据处理和集成中。XML（Extensible Markup Language）是一种结构化数据格式，广泛用于存储和传输数据。本教程将介绍如何使用Java解析XML文件，并将解析...
C语言解析XML文件 本文主要讲解了使用C语言解析XML文件的方法，通过分析给定的源码，总结出了一些重要的知识点。 1. XML解析器的实现 XML解析器是将XML文件转换成可以被程序所读取的格式的工具。在给定的源码中...
2. **JavaScript处理XML**：在前端，使用JavaScript来解析XML文件并动态地生成下拉菜单。DOM（Document Object Model）接口允许我们查找、遍历和修改XML文档。例如，我们可能使用`XMLHttpRequest`对象加载XML文件，...
在JavaScript（JS）中，XML（可扩展标记语言）文件的解析是一项常见的任务，尤其在处理数据交换或页面动态更新时。XML作为一种结构化数据格式，可以存储各种类型的信息，而JS作为前端开发的主要语言，提供了多种方法...