ホームページ > 記事 > ウェブフロントエンド > JavaScript は、ニュース ソースとして Baidu RSS を使用して XML を操作します。 example_javascript スキル
JavaScript は、ニュース ソースとして Baidu RSS を使用して XML を操作します。 example_javascript スキル
- WBOYオリジナル
- 2016-05-16 17:56:151120ブラウズ
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"
* 女性:"http://news.baidu.com/n?cmd=1&class=healthnews&tn=rss"
* 家:"http://news.baidu .com/n?cmd=1&class=housenews&tn= rss"
* 車:"http://news.baidu.com/n?cmd=1&class=autonews&tn=rss"
* スポーツ:"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 = {
映画: "xml/movie.xml",
女性: "xml/women.xml",
家: "xml/house.xml",
車: "xml/car.xml",
スポーツ: "xml/sport.xml",
edu: "xml/edu.xml"
}
function Init() {
LoadXml( RssSource.movie, main[0]);
LoadXml(RssSource.women, main[1]);
LoadXml(RssSource.house, main[2]); [3]);
LoadXml(RssSource.sport, main[4]);
}
関数 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); = false;
}
xml .async = false;
xml.load(url);
//XML ドキュメントのルート ノードを取得します
var root = xml.documentElement; //RSS XML ソース内の項目ノードを取得します
var items = root.getElementsByTagName("item");
//DOm オブジェクトを作成します - RSS title
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) " " root.getElementsByTagName("pubDate")[0].text "";
target.appendChild(head);
// DOm オブジェクトを作成します - RSS リスト
var = 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");
//Time
//ハイパーリンクの 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) 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 < items.length; i ) {
//ニュースを格納する DOM オブジェクト li を作成します
var li = document.createElement("li" );
//DOM ハイパーリンク オブジェクトを作成します
var lk = document.createElement("a");
//時間
//タイトルハイパーリンクの属性はニュース テキストの保存にも使用されます
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; 🎜>//li を ul
ul .appendChild(li)
//li にハイパーリンクを追加
li.appendChild(lk);
}
}
显示页面参照源码(htm页面存続)
复制代码代码如下: