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

更新时间：2012年02月17日 22:10:18 作者：

JavaScript操作XML 使用百度RSS作为新闻源示例,需要的朋友可以参考下

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; 
} 

您可能感兴趣的文章:

JS实现图片高亮展示效果实例
这篇文章主要介绍了JS实现图片高亮展示效果的方法,实例分析了JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
Javascript实现禁止输入中文或英文的例子
这篇文章主要介绍了Javascript实现禁止输入中文或英文的方法实例,本文方法都是使用正则表达式实现,需要的朋友可以参考下
2014-12-12
Javascript验证方法大全
这篇文章是集合了Javascript所有表单验证方法，非常全面，感兴趣的小伙伴们可以参考一下
2015-09-09
常用DOM整理
js在操作DOM中存在着许多跨浏览器方面的坑，本文花了我将近一周的时间整理，我将根据实例整理那些大大小小的“坑”。
2015-06-06
web开发js字符串拼接占位符及conlose对象Api详解
本篇文章主要为大家介绍了web开发中字符串的拼接，占位符的使用以及conlose对象Api的使用，有需要的朋友可以借鉴参考下，希望可以有所帮助
2021-09-09
JavaScript中常见的八个陷阱总结
这篇文章主要给大家总结介绍了关于JavaScript中八个常见的陷阱，这些陷阱虽然针对Javascript初学者，但是砖家们你们也可以看一看，避免入了这些坑，感兴趣的朋友们下面来一起看看吧。
2017-06-06
常见JS验证脚本汇总
这篇文章主要介绍了常见JS验证脚本,结合实例形式汇总分析了JavaScript用于验证的系统自带函数与自定义函数,具有一定参考借鉴价值,需要的朋友可以参考下
2015-12-12
JS JSON对象转为字符串的简单实现方法
这篇文章主要介绍了JS中JSON对象转为字符串的简单实现方法。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
javascript实现数字配对游戏的实例讲解
下面小编就为大家分享一篇javascript实现数字配对游戏的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
js学习心得_一个简单的动画库封装tween.js
下面小编就为大家带来一篇js学习心得_一个简单的动画库封装tween.js。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07