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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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实现的贪婪算法实例
2017/10/17 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python3.x上post发送json数据
2018/03/04 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
七年级历史教学反思
2014/02/05 职场文书
网络技术专业求职信
2014/07/13 职场文书
迎国庆演讲稿
2014/09/05 职场文书
会计工作总结范文2014
2014/12/23 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
音乐研修感悟
2015/11/18 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python