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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
javascript截取字符串小结
Apr 28 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
JavaScript交换变量的常用方法小结【4种方法】
May 07 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 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
文本加密解密
2006/06/23 Javascript
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
JS实现简单抖动效果
2017/06/01 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python实现发送邮件功能代码
2017/12/14 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python中函数参数匹配模型详解
2019/06/09 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
京剧自荐信
2014/01/26 职场文书
中学生期末评语
2014/02/03 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
学校证明范文
2015/06/24 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
php实例化对象的实例方法
2021/11/17 PHP
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python