W3Schools.com

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.


WEB HOSTING
Best Web Hosting
PHP MySQL Hosting
Best Hosting Coupons
UK Reseller Hosting
Cloud Hosting
Top Web Hosting
$7.95/mo SEO Hosting
Premium Website Design
WEB BUILDING
XML Editor - Free Trial!
FREE Website BUILDER
Free Website Templates Free CSS Templates
Make Your Own Website
W3SCHOOLS EXAMS
Get Certified in:
HTML, CSS, JavaScript, XML, PHP, and ASP
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
STATISTICS
Browser Statistics
Browser OS
Browser Display
SHARE THIS PAGE