XML Applications

This chapter demonstrates some small XML applications built on XML, HTML, XML DOM and JavaScript.

---

The XML Document Used

In this application we will use the "cd_catalog.xml" file.

---

Display the First CD in an HTML div Element

The following example gets the XML data from the first CD element and displays it in an HTML element with id="showCD". The displayCD() function is called when the page is loaded:

Example

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;
}

Try it yourself »

---

Navigate Between the CDs

To navigate between the CDs in the example above, add a next() and previous() function:

Example

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();
  }
}

Try it yourself »

---

Show Album Information When Clicking On a CD

The last example shows how you can show album information when the user clicks on a CD:

Try it yourself.

For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.