JavaScript操作XML 使用百度RSS作为新闻源示例


Posted in Javascript onFebruary 17, 2012

js操作xml源,作为页面的动态新闻
参考JS源码如下(存为rss.js文件):

var main = document.getElementById("content").getElementsByTagName("DIV"); 
/* 
* 当前目录下面有一个名为xml的子文件夹,下面引用的源保存在目录下。 
* 下面每一行的冒号前面是文件名,后面是xml源地址(可以从源址下载得到xml文件,下载后保存为对应文件名) 
* 可以在下面的地址上单击右键,选择目标另存为,下载后得到的是txt文件,更改扩展名为xml即可 
* movie:"http://news.baidu.com/n?cmd=1&class=film&tn=rss" 
* woman:"http://news.baidu.com/n?cmd=1&class=healthnews&tn=rss" 
* house:"http://news.baidu.com/n?cmd=1&class=housenews&tn=rss" 
* car:"http://news.baidu.com/n?cmd=1&class=autonews&tn=rss" 
* sport:"http://news.baidu.com/n?cmd=1&class=sportnews&tn=rss" 
* edu:"http://news.baidu.com/n?cmd=1&class=edunews&tn=rss" 
*/ 
var RssSource = { 
movie: "xml/movie.xml", 
woman: "xml/woman.xml", 
house: "xml/house.xml", 
car: "xml/car.xml", 
sport: "xml/sport.xml", 
edu: "xml/edu.xml" 
} 
function Init() { 
LoadXml(RssSource.movie, main[0]); 
LoadXml(RssSource.woman, main[1]); 
LoadXml(RssSource.house, main[2]); 
LoadXml(RssSource.car, main[3]); 
LoadXml(RssSource.sport, main[4]); 
LoadXml(RssSource.edu, main[5]); 
} 
function LoadXml(url, target) { 
var xml = null; 
var isIE = true; 
if (window.ActiveXObject) //IF IE 
{ 
xml = new ActiveXObject("Microsoft.XMLDOM"); 
isIE = true; 
} else if (document.implementation.createDocument) //IF FF 
{ 
xml = document.implementation.createDocument("", "", null); 
isIE = false; 
} 
xml.async = false; 
xml.load(url); 
//获取XML文档根节点 
var root = xml.documentElement; 
//获取RSS的XML源中的item节点 
var items = root.getElementsByTagName("item"); 
//创建DOm对象 ——RSS标题 
var head = document.createElement("dt"); 
head.setAttribute("style", "background-color:#ccc;cursor:pointer;"); 
if (isIE) { //IE时操作 
head.innerHTML = "<b>" + (root.getElementsByTagName("title")[0].text).substring(2, 6) + "</b> <sub>" + root.getElementsByTagName("pubDate")[0].text + "</sub>"; 
target.appendChild(head); 
//创建DOm对象 ——RSS列表 
var ul = document.createElement("ul"); 
//把列表添加到DIV容器中 
target.appendChild(ul); 
//循环输出每天新闻到li中,其中items.length是新闻条数 
for (i = 0; i < items.length; i++) { 
//创建DOM对象li,存放新闻 
var li = document.createElement("li"); 
//创建DOM超链接对象 
var lk = document.createElement("a"); 
//时间 
//超链接的title属性,同时用于保存新闻文本 
lk.title = items[i].selectSingleNode("title").text; 
//设置超链接的href属性 
lk.href = items[i].selectSingleNode("link").text; 
//超链接显示的文本 , 若长于15个字符,则截取,然后加上... 
lk.innerHTML = lk.title.length > 18 ? lk.title.substring(0, 16) + "....": lk.title; 
//lk.innerText = lk.title; 
//把li添加到ul中 
ul.appendChild(li); 
//把超链接添加到li中 
li.appendChild(lk); 
} 
} else { //非IE时操作 
head.innerHTML = "<b>" + (root.getElementsByTagName("title")[0].textContent).substring(2, 6) + "</b> <sub>" + root.getElementsByTagName("pubDate")[0].textContent + "</sub>"; 
target.appendChild(head); 
//创建DOm对象 ——RSS列表 
var ul = document.createElement("ul"); 
//把列表添加到DIV容器中 
target.appendChild(ul); 
//循环输出每天新闻到li中,其中items.length是新闻条数 
for (i = 0; i < items.length; i++) { 
//创建DOM对象li,存放新闻 
var li = document.createElement("li"); 
//创建DOM超链接对象 
var lk = document.createElement("a"); 
//时间 
//超链接的title属性,同时用于保存新闻文本 
lk.title = items[i].getElementsByTagName("title")[0].textContent; 
//设置超链接的href属性 
lk.href = items[i].getElementsByTagName("link")[0].textContent; 
//超链接显示的文本 , 若长于15个字符,则截取,然后加上... 
lk.innerHTML = lk.title.length > 18 ? lk.title.substring(0, 16) + "....": lk.title; 
//lk.innerText = lk.title; 
//把li添加到ul中 
ul.appendChild(li); 
//把超链接添加到li中 
li.appendChild(lk); 
} 
} 
}

显示页面参考源码(存为htm页面)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link type="text/css" rel="stylesheet" href="index.css"> 
<base target="_blank"> 
</head> 
<body onload="Init()"> 
<div id="pagebody"> 
<div id="header"> 
<div id="banner"></div> 
</div> 
<div id="content"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
<div class="left"></div> 
<div class="right"></div> 
</div> 
</div> 
</body> 
</html> 
<script type="text/javascript" src="rss.js"></script>

CSS源码(存为index.css )
a:link,a:visited,a:active { 
text-decoration:none; 
} 
a:hover { 
text-decoration:underline; 
} 
#pagebody { 
margin:0 auto; 
width:800px; 
height:1200px; 
border-left:dotted 1px gray; 
border-right:dotted 1px gray; 
background-color:#eee; 
} 
#header { 
height:200px; 
} 
#banner { 
height:160px; 
background-color:#fff; 
} 
#content div { 
width:380px; 
height:270px; 
border:solid 1px gray; 
overflow:hidden; 
background-color:#fff; 
} 
#content div ul li { 
list-style-image:url(list.gif); 
} 
.left { 
float:left; 
margin-top:10px; 
margin-left:10px; 
} 
.right { 
float:right; 
margin-top:10px; 
margin-right:10px; 
}
Javascript 相关文章推荐
javascript事件问题
Sep 05 Javascript
网页中的图片的处理方法与代码
Nov 26 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
再谈JavaScript线程
Jul 10 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
根据Bootstrap Paginator改写的js分页插件
Dec 25 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 #Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 #Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 #Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 #Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 #Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 #Javascript
javascript简易缓动插件(源码打包)
Feb 16 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jquery处理json对象
2014/11/03 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
django 创建过滤器的实例详解
2017/08/14 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
Python中Unittest框架的具体使用
2019/08/27 Python
浅析Python面向对象编程
2020/07/10 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
StubHub德国:购买和出售门票
2017/09/06 全球购物
大一自我鉴定范文
2013/10/04 职场文书
银行批评与自我批评
2014/02/10 职场文书
怀念母亲教学反思
2014/04/28 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
工作时间调整通知
2015/04/24 职场文书
上班迟到检讨书
2015/05/06 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
高一化学教学反思
2016/02/22 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL