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

154 阅读 0 评论 102 点赞

我是靠谱客的博主风趣翅膀，最近开发中收集的这篇文章主要介绍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; 
} 