免費(fèi)AI編程助手
XML 應(yīng)用程序
2018-02-09 17:47 更新
XML 應(yīng)用程序
本章演示一些基于 XML, HTML, XML DOM 和 JavaScript 構(gòu)建的小型 XML 應(yīng)用程序。
XML 文檔實(shí)例
在本應(yīng)用程序中，我們將使用 "cd_catalog.xml" 文件。
在 HTML div 元素中顯示第一個(gè) CD
下面的實(shí)例從第一個(gè) CD 元素中獲取 XML 數(shù)據(jù)，然后在 id="showCD" 的 HTML 元素中顯示數(shù)據(jù)。displayCD() 函數(shù)在頁(yè)面加載時(shí)調(diào)用：
實(shí)例
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;
}
嘗試一下 ?
添加導(dǎo)航腳本
為了向上面的實(shí)例添加導(dǎo)航（功能），需要?jiǎng)?chuàng)建 next() 和 previous() 兩個(gè)函數(shù)：
實(shí)例
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();
}
}
嘗試一下 ?
當(dāng)點(diǎn)擊 CD 時(shí)顯示專(zhuān)輯信息
最后的實(shí)例展示如何在用戶(hù)點(diǎn)擊某個(gè) CD 項(xiàng)目時(shí)顯示專(zhuān)輯信息：
嘗試一下。
如需了解更多關(guān)于使用 JavaScript 和 XML DOM 的信息，請(qǐng)?jiān)L問(wèn)我們的 XML DOM 教程。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：