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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
javascript入门·对象属性方法大总结
Oct 01 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
js刷新页面location.reload()用法详解
Dec 09 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
PHP include_path设置技巧分享
2011/07/03 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
php define的第二个参数使用方法
2013/11/04 PHP
php去除HTML标签实例
2013/11/06 PHP
php生成图片缩略图的方法
2015/04/07 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python类的多重继承问题深入分析
2014/11/09 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
python中星号变量的几种特殊用法
2016/09/07 Python
发布你的Python模块详解
2016/09/15 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python实现电脑自动关机
2018/06/20 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
社会发展项目建议书
2014/08/25 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
考生诚信考试承诺书
2015/04/29 职场文书