JavaScript操作XML实例代码(获取新闻标题并分页,并分页)


Posted in Javascript onMay 25, 2010

具体内容我没有做测试。仅供参考
代码

<?xml version="1.0" encoding="gb2312"?> 
<NEWS> 
<New id="1" name="测试新闻1" time="2010-2-18"> 
<NBody>新闻测试1新闻测试1</NBody> 
</New> 
<New id="2" name="测试新闻2" time="2010-2-18"> 
<NBody>新闻测试2新闻测试2</NBody> 
</New> 
<New id="3" name="测试新闻3" time="2010-2-18"> 
<NBody>新闻测试3新闻测试3</NBody> 
</New> 
<New id="4" name="测试新闻4" time="2010-2-18"> 
<NBody>新闻测试4新闻测试4</NBody> 
</New> 
<New id="5" name="测试新闻5" time="2010-2-18"> 
<NBody>新闻测试5新闻测试5</NBody> 
</New> 
<New id="6" name="测试新闻6" time="2010-2-18"> 
<NBody>新闻测试6新闻测试6</NBody> 
</New> 
<New id="7" name="测试新闻7" time="2010-2-18"> 
<NBody>新闻测试7新闻测试7</NBody> 
</New> 
<New id="8" name="测试新闻8" time="2010-2-18"> 
<NBody>新闻测试8新闻测试8</NBody> 
</New> 
<New id="9" name="测试新闻9" time="2010-2-18"> 
<NBody>新闻测试9新闻测试9</NBody> 
</New> 
</NEWS>

JS 代码部分。js部分代码比较简单。 重要的就几XML 操作函数
//JavaScript 
function bindNew(index) 
{ 
var List = new Array(); 
List = showPage(index); 
var listul = "<ul style=\" font-size:12px \">" 
for( var i=0 ; i < List.length ; i++) 
{ 
//document.getElementById("listTb").innerHTML += List[i]+"</br>"; 
listul += "<li style=\" margin-top:4px\">"+ List[i] + "</li>"; 
} 
listul += "</ul>"; 
document.getElementById("listTb").innerHTML = listul; 
document.getElementById("refer").innerHTML = ""; 
var tc = rtnPageCount(); 
for( var i=1 ; i<=tc ; i++) 
{ 
//<div style="width:14px; height:12px; color:#FFFFFF; background-color:#000000; float:left"></div> 
document.getElementById("refer").innerHTML += "<div style=\"width:14px; height:14px; color:#FFFFFF; background-color:#000000; float:left; cursor:hand\" onclick=\" bindNew("+i+")\">"+ i +"</div>"; 
} 
} 
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
xmlDoc.async = false; 
xmlDoc.resolveExternals = false; 
xmlDoc.load("News.xml"); 
// 返回固定 ID 的新闻 
function findNew(newid) 
{ 
var Domelement = xmlDoc.documentElement; 
alert(Domelement); 
} 
// 返回分页后的新闻标题连接 
var pageSize = 40; 
function showPage(pageIndex) 
{ 
var Alltt = new Array(); 
Alltt = AlltitleLink(); 
var rtLinks = new Array(); 
/*未完成部分*/ 
try 
{ 
for( var i=0 ; i< pageSize && (pageSize*(pageIndex-1)+i)<Alltt.length ; i++) 
{ 
rtLinks[i] = Alltt[pageSize*(pageIndex-1)+i]; 
} 
} 
catch(e) 
{ alert("showPage() 方法出错 !"); } 
return rtLinks; 
} 
//返分页后的页数 
function rtnPageCount() 
{ 
var countx = getCount(); 
if(countx%pageSize == 0) 
{ 
return countx/pageSize ; 
} 
else 
{ 
return countx/pageSize + 1 ; 
} 
} 
//返回新闻条数 
function getCount() 
{ 
var NewRoot = xmlDoc.documentElement; 
var AllNews = NewRoot.childNodes; 
return AllNews.length; 
} 
//返回固定条数的新闻标题连接 
function returnNews(count) 
{ 
var titles = new Array(); 
var j = 0; 
NewRoot = xmlDoc.documentElement; 
allNews = NewRoot.childNodes; 
for( var i=0 ; i<allNews.length ; i++ ) 
{ 
if(i >= allNews.lenth) 
{ 
titles[j] = "<a herf=\"../News.html?id=" + (i+1) + "\">"+ allNews[i].getArrtibute("name") +"</a>"; 
j++; 
} 
} 
return titles; 
} 
//发回所有新闻 标题的超连接 
function AlltitleLink() 
{ 
var allttLink = new Array(); 
var NewRoot = xmlDoc.documentElement ; 
var allNews = NewRoot.childNodes; 
for( var i=0 ; i<allNews.length ; i++ ) 
{ 
var context = allNews[i]; 
allttLink[i] = "<a href=\"../News.html?id="+(i+1)+"\">"+ context.getAttribute("time")+ " : " + context.getAttribute("name") +"</a>"; 
} 
return allttLink; 
}

部分Html 代码
<table width="90%" border="0" cellspacing="0" cellpadding="0" style="font-size:12px; text-align:left"> 
<tr> 
<td><div style="width:400px; border-bottom:1px dotted #999999; color:#333333; font-weight:bold">全部动态>></div></td> 
</tr> 
<tr> 
<td> 
<div id="listTb" class="listul"></div> </td> 
</tr> 
<tr> 
<td> 
<div id="refer"></div> </td> 
</tr> 
</table>

希望对大家的学习工作又所帮助, 欢迎提问反馈
Javascript 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
详解微信小程序开发用户授权登陆
Apr 24 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 #Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 #Javascript
json格式化/压缩工具 Chrome插件扩展版
May 25 #Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 #Javascript
js 设置选中行的样式的实现代码
May 24 #Javascript
基于jquery的direction图片渐变动画效果
May 24 #Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 #Javascript
You might like
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
python实现发送邮件功能代码
2017/12/14 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
纬创Java面试题笔试题
2014/10/02 面试题
女大学生个人求职信
2013/12/09 职场文书
干部培训自我鉴定
2014/01/22 职场文书
好人好事事迹材料
2014/02/12 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
部门2014年度工作总结
2014/11/12 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
安全承诺书格式范本
2015/04/28 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
开网店计划分析
2019/07/30 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
JavaScript实现简单图片切换
2021/04/29 Javascript
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
详解Vue3使用axios的配置教程
2022/04/29 Vue.js