XML Aplikacje
Ten rozdział pokazuje pewną niewielką oparty na języku XML XML aplikacji, HTML, XML i JavaScript DOM zbudowany.
Dokument XML wystąpienie
W tej aplikacji, użyjemy "cd_catalog.xml" plik.
Pokazuje CD w elemencie HTML div
Poniższe przykłady uzyskać dane XML z pierwszego elementu na płycie CD, a następnie wyświetlić dane w id = "showCD" elementu HTML. displayCD () funkcja jest wywoływana po załadowaniu strony:
Przykłady
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;
}
Spróbuj »
Dodaj skrypt nawigacji
Aby dodać nawigację (funkcja) na powyższym przykładzie, musimy stworzyć następny () i poprzednia () dwie funkcje:
Przykłady
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();
}
}
Spróbuj »
Po kliknięciu informacji o albumie CD pojawia się, gdy
Ostatni przykład pokazuje, jak wyświetlić informacje o albumie, gdy użytkownik kliknie na projekcie CD:
Spróbuj .
Aby uzyskać więcej informacji na temat korzystania z JavaScript i XML, DOM, odwiedź naszą XML DOM samouczek .