Este capítulo muestra algunas pequeñas aplicaciones XML construidas en XML, HTML, XML DOM y JavaScript.
En esta aplicación, usaremos el archivo "cd_catalog.xml".
El siguiente ejemplo obtiene los datos XML del primer elemento CD y luego muestra los datos en el elemento HTML con id="showCD". La función displayCD() se llama cuando se carga la página:
x=xmlDoc.getElementsByTagName("CD");
yo=0;
función mostrarCD()
{
artista=(x[i].getElementsByTagName("ARTISTA")[0].childNodes[0].nodeValue);
título=(x[i].getElementsByTagName("TÍTULO")[0].childNodes[0].nodeValue);
año=(x[i].getElementsByTagName("AÑO")[0].childNodes[0].nodeValue);
txt="Artista: " + artista + "<br />Título: " + título + "<br />Año: "+ año;
document.getElementById("showCD").innerHTML=txt;
}
Pruébalo »
Para agregar navegación (funcionalidad) al ejemplo anterior, es necesario crear dos funciones: siguiente() y anterior():
función siguiente()
{ // muestra el siguiente CD, a menos que estés en el último CD
si (i<x.longitud-1)
{
yo ++;
mostrarCD();
}
}
función anterior()
{ // muestra el CD anterior, a menos que estés en el primer CD
si (i>0)
{
i--;
mostrarCD();
}
}
Pruébalo »
El último ejemplo muestra cómo mostrar información del álbum cuando el usuario hace clic en un elemento del CD:
Probar.
Para obtener más información sobre el uso de JavaScript y XML DOM, visite nuestro tutorial de XML DOM.