Skip to main content

XML DOM: Traversing Nodes

Traversing means looping through or traveling across the node tree.

Traversing the Node Tree​

Often you want to loop an XML document, for example: when you want to extract the value of each element.

This is called Traversing the node tree.

Example of looping through all child nodes of <book>, and displays their names and values:

<!DOCTYPE html>
<html>
    <body>
        <p id="demo"></p>
        <script>
            var x, i ,xmlDoc;
            var txt = "";
            var text = "<book>" +
            "<title>A Great Book</title>" +
            "<author>Tom Nolan</author>" +
            "<year>2022</year>" +
            "</book>";
            
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text,"text/xml");
            
            // documentElement always represents the root node
            x = xmlDoc.documentElement.childNodes;
            for (i = 0; i < x.length ;i++) {
                txt += x[i].nodeName + ": " + x[i].childNodes[0].nodeValue + "<br>";
            }
            document.getElementById("demo").innerHTML = txt;
        </script>
    </body>
</html>

Output:

title: A Great Book  
author: Tom Nolan  
year: 2022

Browser Differences in DOM Parsing​

All modern browsers support the W3C DOM specification.

However, there are some differences between browsers.

One important difference is: the way they handle white-spaces and new lines.

DOM: White Spaces and New Lines​

XML often contains new line, or white space characters, between nodes.

For example, Internet Explorer 9 and earlier do not treat empty white-spaces, or new lines as text nodes, while other browsers do.

PCDATA (Parsed Character Data)​

XML parsers normally parse all the text in an XML document.

When an XML element is parsed, the text between the XML tags is also parsed:

<message>This text is also parsed</message>

The parser does this because XML elements can contain other elements, as in this example, where the <name> element contains two other elements (first and last):

<name><first>Bill</first><last>Gates</last></name>

and the parser will break it up into sub-elements like this:

<name>  
	<first>Bill</first>  
	<last>Gates</last>  
</name>

Parsed Character Data (PCDATA) is a term used about text data that will be parsed by the XML parser.

CDATA (Unparsed Character Data)​

The term CDATA is used about text data that should not be parsed by the XML parser.

Characters like < and & are illegal in XML elements.

  • < will generate an error because the parser interprets it as the start of a new element.

  • & will generate an error because the parser interprets it as the start of a character entity.

Some text, like JavaScript code, contains a lot of < or & characters. To avoid errors script code can be defined as CDATA.

Everything inside a CDATA section is ignored by the parser.

A CDATA section starts with <![CDATA[ and ends with ]]>:

<script>  
<![CDATA[  
function matchwo(a,b)  {  
	if (a < b && a < 0) {  
		return  1;  
	} else  {  
		return  0;  
	}  
}  
]]>  
</script>

In the example above, everything inside the CDATA section is ignored by the parser.

note

A CDATA section cannot contain the string ]]>. Nested CDATA sections are not allowed.

The ]]> that marks the end of the CDATA section cannot contain spaces or line breaks.

Table of Contents