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 an 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.