body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } .container { width: 80%; margin: auto; overflow: hidden; padding: 20px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); } header { background: #35424a; color: #ffffff; padding-top: 30px; min-height: 70px; border-bottom: #e8491d 3px solid; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 16px; } .highlight { color: #e8491d; } .nav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; } .nav li { background: #e8491d; color: #fff; padding: 5px 10px; border-radius: 5px; } .nav a { color: #fff; text-decoration: none; } h1, h2, h3 { color: #35424a; } .code-block { background: #f4f4f4; border-left: 3px solid #e8491d; padding: 10px; margin: 20px 0; overflow-x: auto; font-family: 'Courier New', Courier, monospace; } .try-it { display: inline-block; background: #e8491d; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin: 10px 0; } .try-it:hover { background: #c0392b; } footer { background: #35424a; color: #ffffff; text-align: center; padding: 20px; margin-top: 40px; }

XML Applications | Tutorial

Tutorial -- Learning is not just about technology, but also about dreams!

XML Tutorial

XML JavaScript

XML Advanced

XML Applications

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

XML Document Example

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

Display the First CD in an HTML div Element

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

Example

x=xmlDoc.getElementsByTagName("CD");

i=0;

function displayCD()
{
    artist=(x.getElementsByTagName("ARTIST").childNodes.nodeValue);
    title=(x.getElementsByTagName("TITLE").childNodes.nodeValue);
    year=(x.getElementsByTagName("YEAR").childNodes.nodeValue);
    txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
    document.getElementById("showCD").innerHTML=txt;
}

Try it Yourself »

Add Navigation Script

To add navigation (functionality) to the example above, you need to create two functions, next() and previous():

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 a CD is Clicked

The final example shows how to display album information when a user clicks on a CD item:

Try it Yourself.

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

YouTip