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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
原生js实现照片墙效果
Oct 13 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
Zerg建筑一览
2020/03/14 星际争霸
1 Tube Radio
2021/03/02 无线电
PHP学习 变量使用总结
2011/03/24 PHP
PHP基础知识回顾
2012/08/16 PHP
php强制运行广告的方法
2014/12/01 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python实现简单的计时器功能函数
2015/03/14 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
幼儿园开学寄语
2014/04/03 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
python opencv旋转图片的使用方法
2021/06/04 Python