XMLアプリケーション

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;

関数displayCD()
{
アーティスト=(x[i].getElementsByTagName("アーティスト")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="アーティスト: " + アーティスト + "<br />タイトル: " + タイトル + "<br />年: "+ 年;
document.getElementById("showCD").innerHTML=txt;
}

試してみましょう »

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

上記の例にナビゲーション (機能) を追加するには、next() とPrevious() という 2 つの関数を作成する必要があります。

例

関数 next()
{ // 最後の CD を使用している場合を除き、次の CD を表示します
if (i<x.length-1)
{
i++;
ディスプレイCD();
}
}

関数previous()
{ // 最初の CD を使用している場合を除き、前の CD を表示します
if (i>0)
{
私 - ;
ディスプレイCD();
}
}

試してみましょう »

CDをクリックするとアルバム情報を表示

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

試してみてください。

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