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() 兩個函數：#實例
執行實例»點擊"運行實例" 按鈕查看線上實例
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();
}
}執行實例»點擊"運行實例" 按鈕查看線上實例
當點擊CD 時顯示專輯資訊最後的實例展示如何在使用者點擊某個CD 專案時顯示專輯資訊：嘗試。 如需了解更多關於使用 JavaScript 和 XML DOM 的信息，請造訪我們的 XML DOM 教學。
