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 相关文章推荐
JavaScript 面向对象之命名空间
May 04 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
javascript对象的创建和访问
Mar 08 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
Vue父组件监听子组件生命周期
Sep 03 Javascript
微信小程序input抖动问题的修复方法
Mar 03 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调用数据库的存贮过程
2006/10/09 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
asp 的 分词实现代码
2007/05/24 Javascript
jquery animate 动画效果使用说明
2009/11/04 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
jquery等待效果示例
2014/05/01 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python发布模块的步骤分享
2014/02/21 Python
python语音识别实践之百度语音API
2018/08/30 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
python中如何使用insert函数
2020/01/09 Python
Python实现微信表情包炸群功能
2021/01/28 Python
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
教研活动主持词
2015/07/03 职场文书
2019年入党思想汇报
2019/03/25 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技