Use Baidu RSS as a news source example for XML JavaScript operations

Js operation xml source, as the dynamic news of the page
See the JS source code below (saved as an rss. js file ): Copy codeThe Code is as follows: var main = document. getElementById ("content"). getElementsByTagName ("DIV ");
/*
* The current directory contains a sub-folder named xml, and the referenced source is stored in the directory.
* The colon in each row is followed by the file name and the xml source address (you can download the xml file from the source address and save it as the corresponding file name)
* You can right-click the address below and select Save as the target. After the download, the txt file is obtained and the extension is changed to 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 );
// Get the root node of the XML document
Var root = xml.doc umentElement;
// Obtain the item node in the rss xml Source
Var items = root. getElementsByTagName ("item ");
// Create a DOm object-RSS title
Var head = document. createElement ("dt ");
Head. setAttribute ("style", "background-color: # ccc; cursor: pointer ;");
If (isIE) {// IE operation
Head. innerHTML = "<B>" + (root. getElementsByTagName ("title") [0]. text ). substring (2, 6) + "</B> _{" + root. getElementsByTagName ("pubDate") [0]. text + "} ";
Target. appendChild (head );
// Create a DOm object-RSS list
Var ul = document. createElement ("ul ");
// Add the list to the DIV container
Target. appendChild (ul );
// Cyclically output the daily news to li, where items. length is the number of news entries
For (I = 0; I <items. length; I ++ ){
// Create the DOM object li to store news
Var li = document. createElement ("li ");
// Create a DOM Hyperlink Object
Var lk = document. createElement ("");
// Time
// The title attribute of the hyperlink, used to save news text at the same time
Lk. title = items [I]. selectSingleNode ("title"). text;
// Set the href attribute of the hyperlink
Lk. href = items [I]. selectSingleNode ("link"). text;
// The text displayed in the hyperlink. If it is longer than 15 characters, it is truncated and added...
Lk. innerHTML = lk. title. length> 18? Lk. title. substring (0, 16) + "...": lk. title;
// Lk. innerText = lk. title;
// Add li to ul
Ul. appendChild (li );
// Add the hyperlink to li
Li. appendChild (lk );
}
} Else {// non-IE operation
Head. innerHTML = "<B>" + (root. getElementsByTagName ("title") [0]. textContent ). substring (2, 6) + "</B> _{" + root. getElementsByTagName ("pubDate") [0]. textContent + "} ";
Target. appendChild (head );
// Create a DOm object-RSS list
Var ul = document. createElement ("ul ");
// Add the list to the DIV container
Target. appendChild (ul );
// Cyclically output the daily news to li, where items. length is the number of news entries
For (I = 0; I <items. length; I ++ ){
// Create the DOM object li to store news
Var li = document. createElement ("li ");
// Create a DOM Hyperlink Object
Var lk = document. createElement ("");
// Time
// The title attribute of the hyperlink, used to save news text at the same time
Lk. title = items [I]. getElementsByTagName ("title") [0]. textContent;
// Set the href attribute of the hyperlink
Lk. href = items [I]. getElementsByTagName ("link") [0]. textContent;
// The text displayed in the hyperlink. If it is longer than 15 characters, it is truncated and added...
Lk. innerHTML = lk. title. length> 18? Lk. title. substring (0, 16) + "...": lk. title;
// Lk. innerText = lk. title;
// Add li to ul
Ul. appendChild (li );
// Add the hyperlink to li
Li. appendChild (lk );
}
}
}

Display page reference source code (stored as htm page)Copy codeThe Code is as follows: <! 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 source code (saved as index.css)Copy codeThe Code is as follows: a: link, a: visited, a: active {
Text-decoration: none;
}
A: hover {
Text-decoration: underline;
}
# Pagebody {
Margin: 0 auto;
Width: 800px;
Height: pixel PX;
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: pixel PX;
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;
}