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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
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
Admin generator, filters and I18n
2011/10/06 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python 查找字符串是否存在实例详解
2017/01/20 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python如何删除列为空的行
2020/07/17 Python
python如何设置静态变量
2020/09/07 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
精细化工应届生求职信
2013/11/17 职场文书
班级读书活动总结
2014/06/30 职场文书
初级党校心得体会
2014/09/11 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
JavaScript实现音乐播放器
2022/08/14 Javascript