XML Applications

## XML Basic

XML HOME XML Introduction XML How to use XML Tree XML Syntax XML Elements XML Attributes XML Validation XML Validator XML Viewing XML CSS XML XSLT

## XML JavaScript

XML HTTP Request XML Parser XML DOM XML in HTML XML Applications

## XML Advanced

XML Namespaces XML CDATA XML Encoding XML Server XML DOM Advanced XML Technologies XML in Real Life XML Editors XML E4X XML Summary

## XML Examples

XML Examples XML Quiz XML Certificate

# XML Applications

« Previous
Next Chapter »

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.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE