JS操作XML实例总结(加载与解析XML文件、字符串)


Posted in Javascript onDecember 08, 2015

本文实例讲述了JS操作XML的方法。分享给大家供大家参考,具体如下:

我的xml文件Login.xml如下.

<?xml version="1.0" encoding="utf-8" ?>
<Login>
 <Character>
 <C Text="热血" Value="0"></C>
 <C Text="弱气" Value="1"></C>
 <C Text="激情" Value="2"></C>
 <C Text="冷静" Value="3"></C>
 <C Text="冷酷" Value="4"></C>
 </Character>
 <Weapon>
 <W Text="光束剑" Value="0"></W>
 <W Text="光束配刀" Value="1"></W>
 </Weapon>
 <EconomyProperty>
 <P Text="平均型" Value="0"></P>
 <P Text="重视攻击" Value="1"></P>
 <P Text="重视敏捷" Value="2"></P>
 <P Text="重视防御" Value="3"></P>
 <P Text="重视命中" Value="4"></P>
 </EconomyProperty>
</Login>

现在我需要对这个xml文件的内容进行操作.

首先,我们需要加载这个xml文件,js中加载xml文件,是通过XMLDOM来进行的.

// 加载xml文档
loadXML = function(xmlFile)
{
 var xmlDoc;
 if(window.ActiveXObject)
 {
 xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
 xmlDoc.async = false;
 xmlDoc.load(xmlFile);
 }
 else if (document.implementation&&document.implementation.createDocument)
 {
 xmlDoc = document.implementation.createDocument('', '', null);
 xmlDoc.load(xmlFile);
 }
 else
 {
 return null;
 }
 return xmlDoc;
}

xml文件对象出来了, 接下去我就要对这个文档进行操作了.

比如说,我们现在需要得到节点Login/Weapon/W的第一个节点的属性,那么我们可以如下进行.

// 首先对xml对象进行判断
checkXMLDocObj = function(xmlFile)
{
 var xmlDoc = loadXML(xmlFile);
 if(xmlDoc==null)
 {
 alert('您的浏览器不支持xml文件读取,于是本页面禁止您的操作,推荐使用IE5.0以上可以解决此问题!');
 window.location.href='/Index.aspx';
 }
 return xmlDoc;
}
// 然后开始获取需要的Login/Weapon/W的第一个节点的属性值
var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
var v = xmlDoc.getElementsByTagName('Login/Weapon/W')[0].childNodes.getAttribute('Text')

而我在我的程序中的写法是这样子的,当然我在程序中的写法是已经应用到实际中的了.一并给出来,以供查看

initializeSelect = function(oid, xPath)
{
 var xmlDoc = checkXMLDocObj('/EBS/XML/Login.xml');
 var n;
 var l;
 var e = $(oid);
 if(e!=null)
 {
 n = xmlDoc.getElementsByTagName(xPath)[0].childNodes;
 l = n.length;
 for(var i=0; i<l; i++)
 {
  var option = document.createElement('option');
  option.value = n[i].getAttribute('Value');
  option.innerHTML = n[i].getAttribute('Text');
  e.appendChild(option);
 }
 }
}

上面的访问代码中,我们是通过xmlDoc.getElementsByTagName(xPath)来进行的.
还可以通过xmlDoc.documentElement.childNodes(1)..childNodes(0).getAttribute('Text')进行访问.

一些常用方法:

xmlDoc.documentElement.childNodes(0).nodeName,可以得到这个节点的名称.
xmlDoc.documentElement.childNodes(0).nodeValue,可以得到这个节点的值. 这个值是来自于这样子的xml格式:<a>b</b>, 于是可以得到b这个值.
xmlDoc.documentElement.childNodes(0).hasChild,可以判断是否有子节点
根据我的经验,最好是使用getElementsByTagName(xPath)的方法对节点进行访问,因为这样子可以直接通过xPath来定位节点,这样子会有更好的性能.

补充:

JS解析XML文件

<script type='text/javascript'>
 loadXML = function(xmlFile){
 var xmlDoc=null;
 //判断浏览器的类型
 //支持IE浏览器
 if(!window.DOMParser && window.ActiveXObject){
  var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
  for(var i=0;i<xmlDomVersions.length;i++){
  try{
   xmlDoc = new ActiveXObject(xmlDomVersions[i]);
   break;
  }catch(e){
  }
  }
 }
 //支持Mozilla浏览器
 else if(document.implementation && document.implementation.createDocument){
  try{
  /* document.implementation.createDocument('','',null); 方法的三个参数说明
   * 第一个参数是包含文档所使用的命名空间URI的字符串; 
   * 第二个参数是包含文档根元素名称的字符串; 
   * 第三个参数是要创建的文档类型(也称为doctype)
   */
  xmlDoc = document.implementation.createDocument('','',null);
  }catch(e){
  }
 }
 else{
  return null;
 }
 if(xmlDoc!=null){
  xmlDoc.async = false;
  xmlDoc.load(xmlFile);
 }
 return xmlDoc;
 }
</script>

JS解析XML字符串

<script type='text/javascript'>
 loadXML = function(xmlString){
 var xmlDoc=null;
 //判断浏览器的类型
 //支持IE浏览器 
 if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判断是否是非ie浏览器
  var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];
  for(var i=0;i<xmlDomVersions.length;i++){
  try{
   xmlDoc = new ActiveXObject(xmlDomVersions[i]);
   xmlDoc.async = false;
   xmlDoc.loadXML(xmlString); //loadXML方法载入xml字符串
   break;
  }catch(e){
  }
  }
 }
 //支持Mozilla浏览器
 else if(window.DOMParser && document.implementation && document.implementation.createDocument){
  try{
  /* DOMParser 对象解析 XML 文本并返回一个 XML Document 对象。
   * 要使用 DOMParser,使用不带参数的构造函数来实例化它,然后调用其 parseFromString() 方法
   * parseFromString(text, contentType) 参数text:要解析的 XML 标记 参数contentType文本的内容类型
   * 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一个。注意,不支持 "text/html"。
   */
  domParser = new DOMParser();
  xmlDoc = domParser.parseFromString(xmlString, 'text/xml');
  }catch(e){
  }
 }
 else{
  return null;
 }
 return xmlDoc;
 }
</script>

测试XML

<?xml version="1.0" encoding="utf-8" ?>
<DongFang>
 <Company>
 <cNname>1</cNname>
 <cIP>1</cIP>
 </Company>
 <Company>
 <cNname>2</cNname>
 <cIP>2</cIP>
 </Company> 
 <Company>
 <cNname>3</cNname>
 <cIP>3</cIP>
 </Company>
 <Company>
 <cNname>4</cNname>
 <cIP>4</cIP>
 </Company>
 <Company>
 <cNname>5</cNname>
 <cIP>5</cIP>
 </Company>
 <Company>
 <cNname>6</cNname>
 <cIP>6</cIP>
 </Company>
</DongFang>

使用方法:

var xmldoc=loadXML(text.xml)
var elements = xmlDoc.getElementsByTagName("Company");
for (var i = 0; i < elements.length; i++) {
 var name = elements[i].getElementsByTagName("cNname")[0].firstChild.nodeValue;
 var ip = elements[i].getElementsByTagName("cIP")[0].firstChild.nodeValue;
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
基于JavaScript实现抽奖系统
Jan 16 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 #Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 #Javascript
AngularJS Module方法详解
Dec 08 #Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 #Javascript
JS与jQ读取xml文件的方法
Dec 08 #Javascript
js实现select下拉框菜单
Dec 08 #Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 #Javascript
You might like
php中实现简单的ACL 完结篇
2011/09/07 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
ThinkPHP路由详解
2015/07/27 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Vue计算属性的使用
2017/08/04 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
对django 模型 unique together的示例讲解
2019/08/06 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
财务出纳岗位职责
2014/02/03 职场文书
党校学习自我鉴定
2014/02/24 职场文书
新年寄语大全
2014/04/12 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
铣工实训报告
2014/11/05 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android
Golang获取List列表元素的四种方式
2022/04/20 Golang