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 相关文章推荐
jQuery 表单验证扩展(四)
Oct 20 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
sublime text配置node.js调试(图文教程)
Nov 23 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 Javascript
详解Vue中watch的高级用法
May 02 Javascript
详解JavaScript栈内存与堆内存
Apr 04 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP实现的简单缓存类
2015/07/29 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
Python日志模块logging简介
2015/04/13 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
超简单使用Python换脸实例
2019/03/27 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
运动会入场词50字
2014/02/20 职场文书
环境科学专业求职信
2014/08/04 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
文艺晚会开场白
2015/05/29 职场文书
人生遥控器观后感
2015/06/11 职场文书