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

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.

« Previous

Next Chapter »

XML Basic

XML JavaScript

XML Advanced

XML Examples

XML Applications

The XML Document Used

Display the First CD in an HTML div Element

Example

Navigate Between the CDs

Example

Show Album Information When Clicking On a CD

抱歉！大部分内容只有英文