XML Applications
This chapter demonstrates some small XML-based application XML, HTML, XML DOM and JavaScript built.
XML document instance
In this application, we will use the "cd_catalog.xml" file.
Showing a CD in HTML div element
The following examples get XML data from the first element of a CD, and then display the data in the id = "showCD" HTML element. displayCD () function is invoked when the page loads:
Examples
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;
}
try it"
Add navigation script
To add navigation (function) to the above example, we need to create the next () and previous () two functions:
Examples
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();
}
}
try it"
When you click the CD album information is displayed when
The last example shows how to display album information when the user clicks on a CD project:
Try .
For more information about using JavaScript and XML DOM, visit our XML DOM tutorial .