js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)


Posted in Javascript onFebruary 02, 2013

分别针对ie和火狐分别作了对xml文档和xml字符串的解析,所有代码都注释掉了,想看哪部分功能,去掉注释就可以了。

至于在ajax环境下解析xml,其实原理是一样的,只不过放在了ajax里,还是要对返回的xml进行解析。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> New Document </title> 
<meta name="Author" content="lushuaiyin"> 
</head> 
<body> 
用js解析xml文档和xml字符串 
</body> 
</html> 
<script> 
//解析xml文档///////////////////////////////////////////////////// 
var xmlDoc=null; 
//支持IE浏览器 
if(window.ActiveXObject){ 
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 
} 
//支持Mozilla浏览器 
else if(document.implementation && document.implementation.createDocument){ 
xmlDoc = document.implementation.createDocument('','',null); 
} 
else{ 
alert("here"); 
} 
if(xmlDoc!=null){ 
xmlDoc.async = false; 
xmlDoc.load("house.xml"); 
} 
//ie和火狐不仅解析器不一样,解析过程也不一样。如下; 
//ie解析xml文档 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居 
//层层遍历解析childNodes[1] 
//alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//弹出200万 
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出150万 
//alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出一室三居 
//还可以用item(i)进行遍历 
//var nodes=xmlDoc.documentElement.childNodes; 
//alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出150万 
//alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出一室三居 
//火狐解析xml文档 
//火狐浏览器和ie解析xml不一样节点的值用textContent。 
//并且他会在有的层次child节点前后都加上"\n"换行符。(这个搞不清楚为什么,用firebug调试的时候就是这个样子,所以写过的代码最好测试一下,换个环境就不对了) 
//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。 
//第3个节点是"\n",第4个节点才是真正的第二个节点。 
//层层获取解析childNodes[0] 
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//弹出150万 
//alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//弹出一室三居 
//直接获取节点名解析getElementsByTagName("address") 
//alert(xmlDoc.getElementsByTagName("address")[0].textContent);//弹出150万 一室三居 200万 300万 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//弹出150万 一室三居 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//弹出150万 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//弹出一室三居 
//alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//弹出200万 
//火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。 
//第一个节点是item(1),第二个节点是item(3),第三个节点是item(5) 
//item(1)函数遍历解析 
//var nodes=xmlDoc.documentElement.childNodes; 
//alert(nodes.item(1).textContent); //弹出150万 一室三居 
//alert(nodes.item(1).childNodes.item(1).textContent); //弹出150万 
//alert(nodes.item(1).childNodes.item(3).textContent); //一室三居 
//解析xml字符串///////////////////////////////////////////////////////////////////////// 
var str="<car>"+ 
"<brand><price>50万</price><pattern>A6</pattern></brand>"+ 
"<brand><price>65万</price><pattern>A8</pattern></brand>"+ 
"<brand><price>17万</price></brand>"+ 
"</car>"; 
//跨浏览器,ie和火狐解析xml使用的解析器是不一样的。 
var xmlStrDoc=null; 
if (window.DOMParser){// Mozilla Explorer 
parser=new DOMParser(); 
xmlStrDoc=parser.parseFromString(str,"text/xml"); 
}else{// Internet Explorer 
xmlStrDoc=new ActiveXObject("Microsoft.XMLDOM"); 
xmlStrDoc.async="false"; 
xmlStrDoc.loadXML(str); 
} 
//ie解析xml字符串 
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//弹出50万 
//alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//弹出A6 
//还可以用item(i)进行遍历 
//var strNodes=xmlStrDoc.documentElement.childNodes; 
//alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text); //弹出50万 
//alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //弹出A6 
//火狐解析xml字符串 
//火狐浏览器和ie解析xml不一样节点的值用textContent。 
//并且他会在有的层次child节点前后都加上"\n"换行符。 
//也就是说第1个节点是"\n",第2个节点才是真正的第一个节点。 
//第3个节点是"\n",第4个节点才是真正的第二个节点。 
//alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//弹出65万 A8 
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8 
//alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//弹出65万 
//火狐也可以用item(1)函数遍历,注意也是有的层次节点前后都加了节点"\n"。 
//第一个节点是item(1),第二个节点是item(3),第三个节点是item(5) 
//var nodes=xmlStrDoc.documentElement.childNodes; 
//alert(nodes.item(1).textContent); //弹出65万 A8 
//alert(nodes.item(1).childNodes.item(0).textContent); //弹出65万 
//alert(nodes.item(1).childNodes.item(1).textContent); //弹出A8 
</script>

其中xml每个节点所在层次是最烦人的问题,只能一次次去试,只要出来一个正确的,
就很好确定节点的层次关系了,或者debug一下。

感觉这方面json还是更好阅读和理解。这个解析太费劲了

<?xml version="1.0" encoding="utf-8" ?> 
<address> 
<city name="北京"> 
<price>150万</price> 
<type>一室三居</type> 
</city> 
<city name="上海"> 
<price>200万 </price> 
</city> 
<city name="杭州"> 
<price>230万</price> 
</city> 
<city name="南京"></city> 
</address>
Javascript 相关文章推荐
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
JS实现的DOM插入节点操作示例
Apr 04 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 #Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 #Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 #Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 #Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 #Javascript
js解析与序列化json数据(三)json的解析探讨
Feb 01 #Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 #Javascript
You might like
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
旧时光糖果:Old Time Candy
2018/02/05 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
领导视察欢迎词
2014/01/15 职场文书
论群众路线学习笔记
2014/11/06 职场文书
个人自荐书范文
2015/03/09 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
调解书格式范本
2015/05/20 职场文书
民事申诉状范本
2015/05/20 职场文书
2016年少先队活动总结
2016/04/06 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL