JavaScript实现读取与输出XML文件数据的方法示例


Posted in Javascript onJune 05, 2018

本文实例讲述了JavaScript实现读取与输出XML文件数据的方法。分享给大家供大家参考,具体如下:

一、介绍

通过JavaScript读取XML文档中数据的方法很多。

其根本的思路就是:首先在后台加载XML文档,然后通过JavaScript获取文档中所需的数据,最后应用HTML展示获取的数据。

二、获取XML元素的属性值的应用

下面应用attributes属性和getNamedItem()方法获取一个指定的XML文档中的属性值。

三、代码

首先创建一个XML文档,并且为指定的元素设置属性,程序代码如下:

<?xml version="1.0" encoding="GB2312"?>
<employes>
  <employe id='1' attendence='经理'>
    <number>1001</number>
    <name>程**</name>
    <object>PHP</object>
    <tel>84971547</tel>
    <address>长春市</address>
    <e_mail>cak**@sina.com</e_mail>
  </employe>
</employes>

然后创建一个index.html文件,实现XML元素中数据和属性值的输出。

获取employe元素的引用,通过attributes获取employe元素的属性集合,用getNamedItem()方法获取集合attributes中attendence对象的引用,并将其赋值给变量attendenceperson。最后通过字符串的拼接实现XML文档中数据和属性值的输出,这里获取的属性值为“经理”。

程序代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>3water.com 获取XML元素的属性值</title>
</head>
<script>
function get_xml(){
  var xmldoc,employesNode,employeNode;        //定义变量
  var nameNode,titleNode,numberNode,displayText;   //定义变量
  var attributes,attendenceperson
  xmldoc = new ActiveXObject("Microsoft.XMLDOM");
  xmldoc.async = false;
  xmldoc.load("index.xml"); //载入指定的XML文档
  employesNode=xmldoc.documentElement;        //获取根节点
  employeNode=employesNode.firstChild;        //访问根元素下的第一个节点
  numberNode=employeNode.firstChild;         //获取number元素
  nameNode=numberNode.nextSibling;          //获取name元素
  objectNode=nameNode.nextSibling;
  telNode=objectNode.nextSibling;
  attributes=employeNode.attributes;         //获取employe节点的属性集合
  attendenceperson=attributes.getNamedItem("attendence")   //获取集合指定对象的引用
  //实现字符串的拼接,输出XML文档中的数据
  displayText="员工信息:"+numberNode.firstChild.nodeValue+','+nameNode.firstChild.nodeValue+', '+objectNode. firstChild.nodeValue+','+telNode.firstChild.nodeValue+"<br>职务:"+attendenceperson.value;
  div.innerHTML=displayText; //指定在ID标识为div的<div>标签中输出字符串displayText的信息
}
</script>
<body>
<h1>输出XML元素中的数据和属性值</h1>
<!--应用onClick事件调用函数get_xml()-->
<input type="button" value="获取XML元素的属性值" onClick="get_xml()">
<div id="div"></div>
</body>
</html>

四、运行结果

JavaScript实现读取与输出XML文件数据的方法示例

注:这里使用了ActiveXObject来进行针对xml文件的操作,需要使用兼容IE的浏览器才能得到运行效果。否则会提示:ActiveXObject is not defined

Javascript 相关文章推荐
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
使用JS获取SessionStorage的值
Jan 12 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 #Javascript
Vue项目中跨域问题解决方案
Jun 05 #Javascript
Vue多系统切换实现方案
Jun 05 #Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 #jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 #Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 #Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 #jQuery
You might like
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
基于文本的访客签到簿
2006/10/09 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python实现的简单计算器功能详解
2018/08/25 Python
python实现控制台打印的方法
2019/01/12 Python
Django之模板层的实现代码
2019/09/09 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
python 发送get请求接口详解
2020/11/17 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
中餐厅经理岗位职责
2014/04/11 职场文书
职位说明书范文
2014/05/07 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL