Aplicações XML
Este capítulo demonstra algum pequeno XML aplicação, HTML, XML DOM baseado em XML e JavaScript construído.
instância de documento XML
Nesta aplicação, vamos usar o "cd_catalog.xml" arquivo.
Mostrando um CD no elemento HTML div
Os exemplos a seguir obter dados XML a partir do primeiro elemento de um CD e, em seguida, exibir os dados no id = "showCD" elemento HTML. displayCD () função é chamado quando a página é carregada:
Exemplos
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;
}
tente »
Adicionar script de navegação
Para adicionar navegação (função) para o exemplo acima, precisamos criar a próxima () e anterior () duas funções:
Exemplos
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();
}
}
tente »
Quando você clica a informação do álbum CD é exibido quando
O último exemplo mostra como exibir informações do álbum quando o usuário clica em um projeto de CD:
Para obter mais informações sobre o uso de JavaScript e XML DOM, visite o nosso XML DOM tutorial .