Traverse XML Data Using JavaScript

n this article, I'll show you how to build an XML-based, client-side JavaScript app that reads data from external XML files, traverses the XML data, and displays that data in a tree format. The sample code uses the XMLDOM ActiveX object built into Microsoft Internet Explorer.

Say you have the following personal data and you want it displayed in a structured manner:

• name: Premshree Pillai
• sex: male
• Websites: Websites
• ws1: http://www.qiksearch.com
• ws2: http://premshree.resource-locator.com

The XML looks like this:

<?xml version="1.0"?>
<personal>Personal Details
        <name>Premshree Pillai</name>
        <sex>male</sex>
        <websites>Websites
                <ws1>http://www.qiksearch.com</ws1>
                <ws2>http://premshree.resource-locator.com</ws2>
        </websites>
</personal>

This is the algorithm you'd use:

1. Read the XML file
2. Point a variable, tree to the first node (XML tag) of the XML data.
3. If the node has child nodes:
   • Print "<ul><li>";
   • For each child node, traverse(tree.childNodes(nodeNum))
   • Print "</li></ul>";
4. If the node does not have any child:
   • Print the node's value.