For a web page I was working on I needed to parse out XML inside of JavaScript. Not XML that was part of the page itself, this was a generic XML block the server was sending JavaScript in response to an AJAX request. The code needed to do that still isn’t 100% clear to me, so I figured typing up an explanation of what I know would be a nice reminder.

Initializing the object and passing it XML to read not only is different between Internet Explorer (IE) and Firefox, but its different if you want to parse XML from a string or from a file. Once you have the XML loaded in the object the way you retrieve the information is the same.

So lets start by creating the object and loading it with XML from an XML string. To create it in IE you do the following:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

You then have to set the async property to false. In Firefox you do:

var xmlParser = new DOMParser();

Next to load the XML string, in IE you call the loadXML() method and pass it the string to parse. In Firefox you call the parseFromString() method and pass it two values; the first is the XML string to parse, the second is a description of the content which should be “text/XML”.

To keep things consistent I wrap both of these steps into a single function. This way the browser specific code is kept in a single place. The function I use looks like this:

function CreateXMLStringParser(XMLString)
{
    try
    {
        var xmlParser = new DOMParser();
        var xmlDoc = xmlParser.parseFromString(XMLString, "text/xml");
    }
    catch(Err)
    {
        try
        {
            var xmlDoc= new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async="false";
            xmlDoc.loadXML(XMLString);
        }
        catch(Err)
        {
            window.alert("Browser does not support XML parsing.");
            return false;
        }
    }

    return xmlDoc;
}

If you wanted to load the XML from a file you use the same object for IE. However, the object changes if you use Firefox, it becomes:

document.implementation.createDocument("","",null);

Next you need to tell the object what XML to load. This is done by calling the load() method and passing it the file name.

Even though the function to load the XML is the same I wrap both steps in a single function to keep things consistent. The function I use looks like this:

function CreateXMLFileParser(XMLFile)
{
    try
    {
        var xmlDoc = document.implementation.createDocument("", "", Null);
        xmlDoc.load(XMLFile);
    }
    catch(Err)
    {
        try
        {
            var xmlDoc= new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async="false";
            xmlDoc.load(XMLFile);
        }
        catch(Err)
        {
            window.alert("Browser does not support XML parsing.");
            return false;
        }
    }

    return xmlDoc;
}

For the purposes of explaining how to use this object to read XML data I’m going to use this XML block:

<Root Attr="Value">
    <Child>
        Some Text
    </Child>
</Root>

I’m going to assume that its been preloaded into one of the objects discussed above using this code:

var XMLText = "<Root Attr="Value">\n   <Child>\n      Some Text\n   </Child>\n</Root>";
var XMLObj = CreateXMLStringParser(XMLText);

Now that we have an XML object loaded with a chunk of XML we need to go through its contents. The XML object provides a set of arrays that will allow you to navigate the XML data any way you’d like.

This is done with the documentElement property of the XML object. It contains a series of nested arrays that contain each node in the XML. Each node has three properties nodeName which holds the name of the tag, nodeValue which contains the text value of the tag, and childNodes which is an array nested elements.

The documentElement has the properties for the root node. In the sample XML it would be the node . So the value of XMLObj.documentElement.nodeName would be “Root”.

In this example childNodes has three pieces in it. Each place where text resides is considered an element and a piece is added to childNodes. The newline and spaces before and after the tag will be considered XML elements. XMLObj.documentElement.childNodes[0] is the newline and tabs before the tag, XMLObj.documentElement.childNodes[1] is the tag, and XMLObj.documentElement.childNodes[2] is the newline following the tag.

Each piece in the childNodes array has the same values as in documentElement, so you can explore the tag in the same way through XMLObj.documentElement.childNodes[1]. So the value of XMLObj.documentElement.childNodes[1].nodeName would be Child. XMLObj.documentElement.childNodes[1].childNodes would be an array with a single piece, the text inside the tag.

The nodeValue property contains the text value of the XML element. It will contain all of the whitespace and text in the element. So XMLObj.documentElement.childNodes[1].childNodes[0].nodeValue would be “\n Some Text\n ” since it is the text inside the tag.

If the element you are working on is another tag then nodeValue would be “null”. XMLObj.documentElement.childNodes[1].nodeValue would be null since it is the tag.

To avoid the extra childNodes pieces created by the XML formatting and keep the whitespace out of nodeValue you can make your XML like this:

<Root><Child>Some Text</Child></Root>

It’s a bit easier to parse out, but more difficult to read.

If you were looking for a specific tag you would have to loop through all the pieces of the childNodes array checking the nodeName properties until you found it. This can get a bit cumbersome, so theres a getElementsByTagName() method that will return an array with every occurance of that tag. For example XMLObj.documentElement.getElementsByTagName(”Child”)[0].childeNodes[0].nodeValue would be the text from the tag, “\n Some Text\n “.

The only other method I’d like to mention is getAttribute(). This allows you to retrieve attribute values of any XML tag. Its included in documentElement as well as all pieces of the childNodes arrays. You pass it the name of the attribute and it returns the value. For example XMLDoc.documentElement.getAttribute(”Attr”) would return “Value”.