Handling White Space in the Mozilla, Netscape, and Firefox Web Browsers

By default, the Mozilla, Netscape, and Firefox browsers don’t omit the white space used for indentation of an XML document. Take a look at event.xml, which is full of indentation white space:

 <?xml version="1.0"?> <events>     <event type="fundraising">        <event_title>National Awards</event_title>        <event_number>3</event_number>        <subject>Pet Awards</subject>        <date>5/5/2007</date>        <people>            <person attendance="present">                <first_name>June</first_name>                <last_name>Allyson</last_name>            </person>            .            .            .        </people>    </event> </events>

To navigate from the <events> node to the <event> node, you have to navigate over the white space text node, which is the first child of the <events> node (marked with xxxx here):

 <?xml version="1.0"?> <events> xxxx<event type="fundraising">            .            .            .

That means you’d have to use this code to get to the <event> element node (note the use of the nextSibling property to get past the indentation white space text node):

 eventsNode = xmldoc.documentElement; eventNode = eventsNode.firstChild.nextSibling;    .    .    .

Similarly, you can navigate over white space text nodes to reach the <people> element:

 <?xml version="1.0"?> <events>     <event type="fundraising">        <event_title>National Awards</event_title>        <event_number>3</event_number>        <subject>Pet Awards</subject>        <date>5/5/2007</date>        <people>            <person attendance="present">                <first_name>June</first_name>                <last_name>Allyson</last_name>            </person>            .            .            .        </people>    </event> </events>

In this case, the last child of the <event> element is not the <people> element, but the white space text node that follows the </people> tag. To take that white space node into account, you can use this expression to get a node corresponding to the <people> element:

 eventsNode = xmldoc.documentElement; eventNode = eventsNode.firstChild.nextSibling; peopleNode = eventNode.lastChild.previousSibling;    .    .    .

Here’s how to rewrite the displayThirdGuest function to take into account the default white space handling in Mozilla, Netscape, and Firefox:

 function displayThirdGuest(xmldoc) {   var eventsNode, eventNode, peopleNode;   var personNode, firstNameNode, lastNameNode, displayText;   eventsNode = xmldoc.documentElement;   eventNode = eventsNode.firstChild.nextSibling;   peopleNode = eventNode.lastChild.previousSibling;   personNode = peopleNode.firstChild.nextSibling     .nextSibling.nextSibling.nextSibling.nextSibling;   firstNameNode = personNode.firstChild.nextSibling;   lastNameNode = firstNameNode.nextSibling.nextSibling;   displayText = "The third guest is: " +     firstNameNode.firstChild.nodeValue + ' '     + lastNameNode.firstChild.nodeValue;   var target = document.getElementById("targetDiv");   target.innerHTML=displayText; }

You can see the results on Figure 9.5.

Figure 9.5: Accessing the third guest in Firefox

The different ways of handling white space nodes in Internet Explorer and the Mozilla, Netscape, and Firefox browsers is troublesome. Isn’t there some way to use the same Ajax application to handle both types of browsers? There is: you can strip the white space out of the XML document before working with it.