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 相关文章推荐
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
Node.js插件安装图文教程
May 06 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
使用zrender.js绘制体温单效果
Oct 31 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
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jquery密码强度校验
2015/12/02 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Python 如何创建一个线程池
2020/07/28 Python
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
法人授权委托书格式
2014/04/08 职场文书
高中运动会广播稿
2014/09/16 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
对照检查剖析材料
2014/09/30 职场文书
2014年教学工作总结
2014/11/13 职场文书
工作检讨书怎么写
2015/01/23 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
解决Oracle数据库用户密码过期
2022/05/11 Oracle