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 XSLTXML JavaScript
XML HTTP Request XML Parser XML DOM XML in HTML XML ApplicationsXML Advanced
XML Namespaces XML CDATA XML Encoding XML Server XML DOM Advanced XML Don't XML Technologies XML in Real Life XML Editors XML E4X XML SummaryXML Examples
XML Examples XML Quiz XML CertificateXML 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;
}
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();
}
}
{ // 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:
For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
