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 項目時顯示專輯信息:
TAG:程序員小新人學習 |