applicazioni XML
Questo capitolo illustra alcuni piccola applicazione XML, HTML, DOM XML basato su XML e JavaScript incorporato.
documento XML
In questa applicazione, useremo il "cd_catalog.xml" file.
Mostrando un CD in elemento HTML div
Gli esempi che seguono ottengono dati XML dal primo elemento di un CD, e quindi visualizzare i dati del id = elemento HTML "showCD". displayCD () è richiamata quando la pagina viene caricata:
Esempi
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;
}
Prova »
Aggiungere lo script di navigazione
Per aggiungere la navigazione (funzione) per l'esempio precedente, abbiamo bisogno di creare il prossimo () e precedente () due funzioni:
Esempi
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();
}
}
Prova »
Quando si fa clic le informazioni CD album viene visualizzato quando
L'ultimo esempio mostra come visualizzare le informazioni album quando l'utente fa clic su un progetto CD:
Prova .
Per ulteriori informazioni sull'utilizzo di JavaScript e DOM XML, visitare il nostro XML DOM Tutorial .