Aplicaciones XML
En este capítulo se muestra una pequeña aplicación XML, HTML, XML DOM basado en XML y JavaScript incorporado.
instancia de documento XML
En esta aplicación, vamos a utilizar el "cd_catalog.xml" archivo.
Mostrando un CD en el elemento HTML div
Los siguientes ejemplos obtener datos XML desde el primer elemento de un CD, y luego mostrar los datos en el id = elemento HTML "showCD". displayCD () la función se invoca cuando se carga la página:
Ejemplos
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;
}
Trate »
Añadir guión de navegación
Para agregar funciones de navegación (función) para el ejemplo anterior, tenemos que crear el siguiente () y anterior () dos funciones:
Ejemplos
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();
}
}
Trate »
Al hacer clic en la información del álbum de CD se muestra cuando
El último ejemplo muestra cómo visualizar la información del álbum cuando el usuario hace clic en un proyecto de CD:
Pruebe .
Para obtener más información sobre el uso de JavaScript y XML DOM, visite nuestro XML DOM tutorial .