XMLアプリケーション

この章では、XML、HTML、XML DOM、および JavaScript に基づいて構築されたいくつかの小規模な XML アプリケーションを示します。

XML ドキュメントの例

このアプリケーションでは、「cd_catalog.xml」ファイルを使用します。

HTML div 要素で最初の CD を表示する

以下の例では、最初の CD 要素から XML データを取得し、そのデータを id="showCD" を使用して HTML 要素に表示します。ページの読み込み時に、displayCD() 関数が呼び出されます:

インスタンス

x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("showCD").innerHTML=txt;
}

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ナビゲーションスクリプトを追加します

上記を追加するにはインスタンスにナビゲーション (関数) を追加するには、next() とPrevious() の 2 つの関数を作成する必要があります:

Instance

function next()
{ // display the next CD, unless you are on the last CD
if (i<x.length-1)
{
i++;
displayCD();
}
}

function previous()
{ // displays the previous CD, unless you are on the first CD 
if (i>0)
{
i--;
displayCD();
}
}

Run Instance»

「インスタンスの実行」ボタンをクリックして、オンラインインスタンスを表示します

CD をクリックしたときにアルバム情報を表示します

最後の例は、ユーザーが CD アイテムをクリックしたときにアルバム情報を表示する方法を示しています。

試してみてください。

JavaScript と XML DOM の使用方法について詳しくは、XML DOM チュートリアルをご覧ください。