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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 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中$_FILES的使用以及注意事项
2013/07/05 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python实现的HTTP并发测试完整示例
2020/04/23 Python
Python Property属性的2种用法
2015/06/21 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
用python写PDF转换器的实现
2020/10/29 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
代理协议书范本
2014/04/22 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
结对共建协议书
2014/08/20 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL