JavaScript操作XML 使用百度RSS作为新闻源示例_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:56 PM

javascriptxml

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 = ""   (root.getElementsByTagName("title")[0].text).substring(2, 6)   " "   root.getElementsByTagName("pubDate")[0].text   ""; 
target.appendChild(head); 
//创建DOm对象 ——RSS列表 
var ul = document.createElement("ul"); 
//把列表添加到DIV容器中 
target.appendChild(ul); 
//循环输出每天新闻到li中，其中items.length是新闻条数 
for (i = 0; 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 = ""   (root.getElementsByTagName("title")[0].textContent).substring(2, 6)   " "   root.getElementsByTagName("pubDate")[0].textContent   ""; 
target.appendChild(head); 
//创建DOm对象 ——RSS列表 
var ul = document.createElement("ul"); 
//把列表添加到DIV容器中 
target.appendChild(ul); 
//循环输出每天新闻到li中，其中items.length是新闻条数 
for (i = 0; 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); 
} 
} 
} 

显示页面参考源码(存为htmPage)

复制代码代码如下：

头> 

身体>

CSS(存为index.css )

复制代码代码如下：

 
a：链接，a：已访问，a：活动 { 
文本装饰：无； 
} 
a:hover { 
文本装饰:下划线; 
} 
#pagebody { 
边距：0 自动； 
宽度：800px； 
高度：1200px； 
左边框：点状1px灰色； 
右边框：点状1px灰色； 
背景颜色：#eee; 
} 
#header { 
高度：200px; 
} 
#banner { 
高度：160px; 
背景颜色：#fff; 
} 
#content div { 
宽度：380px; 
高度：270px； 
边框：实心1px灰色； 
溢出：隐藏； 
背景颜色：#fff; 
} 
#content div ul li { 
list-style-image:url(list.gif); 
} 
.left { 
float:left; 
顶部边距：10px； 
左边距：10px； 
} 
.right { 
float:right; 
顶部边距：10px； 
右边距：10px； 
} 