XMLアプリケーション
この章では、構築されたいくつかの小さなXMLベースのアプリケーションのXML、HTML、XMLのDOMとJavaScriptを示しています。
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;
}
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;
}
»をお試しください
ナビゲーション・スクリプトを追加します。
上記の例にナビゲーション（機能）を追加するために、我々は）2つの機能を（（次）と前を作成する必要があります。
例
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();
}
}
{ // 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();
}
}
»をお試しください
あなたはCDのアルバム情報をクリックするとしたときに表示されます
最後の例では、ユーザーがCDプロジェクトをクリックしたときにアルバム情報を表示する例を示します。
JavaScriptとXML DOMを使用しての詳細については、私たちの訪問XML DOMチュートリアルを 。