javascript中xml操作实现代码


Posted in Javascript onNovember 21, 2011

JavaScript 端:

//初始化页面 
function init() { 
var ary = JSONToArray(XMLReader("node","content.dibi")); 
var divtoc = document.getElementById("div_toc"); 
pageCount = ary.length; 
for(k = 0; k < ary.length; k++){ 
obj = eval('(' + ary[k] + ')'); 
divtoc.innerHTML += "<a href='javascript:changeImage(" + obj.page.substring(obj.page.length-1) + ")'>" 
+ obj.label + "</a>      "; 
} page = 1; 
changeImage(page); 
var pageManager = document.getElementById("div_page"); 
pageManager.innerHTML = "<a href='javascript:changePage(0)'>上一页</a>      " 
+ "<a href='javascript:changePage(1)'>下一页</a><br/><br/>"; 
var ary2 = JSONToArray(XMLReader("meta","content.dibi")); 
var divmeta = document.getElementById("div_meta"); 
var styStr = "<table>" 
for(l = 0; l < ary2.length; l++){ 
obj2 = eval('(' + ary2[l] + ')'); 
styStr += "<tr><td>" + obj2.name + "</td><td>" + obj2.content + "</td></tr>"; 
} 
divmeta.innerHTML = styStr + "</table>"; 
} 
//解析.dibi 文件。 
function XMLReader(key,fileName) { 
var parse = BrowserValidator(); 
parse.load(fileName); 
var json = ""; 
try{ 
var dom = parse.documentElement; 
var attrLength = 0; 
for (i = 0; i < dom.getElementsByTagName(key).length; i++) { 
attrLength = dom.getElementsByTagName(key)[i].attributes.length; 
objMsg = ",{"; 
for(j = 0; j < attrLength; j++){ 
objMsg += "'" + dom.getElementsByTagName(key)[i].attributes[j].name 
+ "':'" + dom.getElementsByTagName(key)[i].attributes[j].value + "',"; 
} 
objMsg = objMsg.substring(0,objMsg.length-1); 
json += objMsg + "}"; 
} 
json = json.substring(1); 
}catch(e){} 
return json; 
} 
//判断浏览器类型。支持 IE ,fireFox。 
function BrowserValidator(){ 
var result; 
if(!window.DOMParser && window.ActiveXObject) { 
result = new ActiveXObject("Microsoft.XMLDOM"); 
result.async = false; 
} 
else if(document.implementation && document.implementation.createDocument) { 
result = document.implementation.createDocument("", "", null); 
result.async = false; 
} 
return result; 
} 
var page = 1; //当前页 
var pageCount; //总页数 
//根据点击改变页面图片 
function changeImage(page1){ 
page = page1; 
var divimg = document.getElementById("div_img"); 
divimg.innerHTML = "<img width='500' src = 'images/" + page +".jpg'/>"; 
} 
//上页及下页 
function changePage(flag){ 
if(flag == 0 && page > 1){ 
page--; 
} 
if(flag == 1 && page < pageCount){ 
page++; 
} 
changeImage(page); 
} 

//将 JSON 数据转换成数组 
function JSONToArray(json){ 
return json.replace(new RegExp("},", "g"), "}|").split("|"); 
}

HTML 端:
<html> 
<head> 
<title></title> 
<script language="javascript" type="text/javascript" charset='gbk' src="xmlhelper.js"></script> 
</head> 
<body onload="init()"> 
<div id="div_toc"></div> 
<div id="div_img"></div> 
<div id="div_page"></div> 
<div id="div_meta"></div> 
</body> 
</html>

XML 端:略。
Javascript 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
手机号码,密码正则验证
Sep 04 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
vue interceptor 使用教程实例详解
Sep 13 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
js调用activeX获取u盘序列号的代码
Nov 21 #Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 #Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 #Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 #Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 #Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 #Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 #Javascript
You might like
处理php自动反斜杠的函数代码
2010/01/05 PHP
浅谈php扩展imagick
2014/06/02 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
Python安装pycurl失败的解决方法
2018/10/15 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
几个人围成一圈的问题
2013/09/26 面试题
如何开启linux的ssh服务
2015/02/14 面试题
教师评优事迹材料
2014/01/10 职场文书
2014年公司庆元旦活动方案
2014/03/05 职场文书
颁奖典礼主持词
2014/03/25 职场文书
1000字打架检讨书
2014/11/03 职场文书
2014年采购工作总结
2014/11/20 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
公司2015年终工作总结
2015/05/26 职场文书