DOM Traversal API

The DOM Traversal API (http://www.w3.org/TR/DOM-Level-2-Traversal-Range/) introduced in DOM Level 2 is a convenience extension that provides a systematic way to traverse and examine the various nodes in a document tree in turn. The specification introduces two objects, a NodeIterator and a TreeWalker.

A NodeIterator object created with document.CreateNodeIterator() can be used to flatten the representation of a document tree or subtree, which can then be moved through using nextNode() and previousNode() methods. A filter can be placed when a NodeIterator is created allowing you to select certain tags provided.

Similar to a NodeIterator, a TreeWalker object provides a way to move through a collection of nodes, but it preserves the tree structure. To create a TreeWalker, use document.createTreeWalker and then use firstChild(), lastChild(), nextSibling(), parentNode(), and previousSibling() methods to navigate the document tree. A TreeWalker also provides the ability to walk the flattened tree using nextNode(), so in some sense a NodeIterator is not really needed. As an example, we redo the tree traversal example from earlier in the chapter using a TreeWalker object.

Note

The DOM Traversal API is not supported in Internet Explorer 6 or earlier. To see this example in action, use Mozilla or another browser that supports DOM Traversal.

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>DOM Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<</head>>
<<body>>
<<h1>>DOM Test Heading<</h1>>
<<hr />>
<<!-- Just a comment -->>
<<p>>A paragraph of <<em>>text<</em>> is just an example<</p>>
<<ul>>
   <<li>><<a href="/">>Yahoo!<</a>><</li>>
<</ul>>

<<form name="testform" id="testform" action="#" method="get">>
Node Name: <<input type="text" id="nodeName" name="nodeName" />><<br />>
Node Type: <<input type="text" id="nodeType" name="nodeType" />><<br />>
Node Value: <<input type= "text" id="nodeValue" name="nodeValue" />><<br />>
<</form>>

<<script type="text/javascript">>
<<!--

if (document.createTreeWalker)
{
  function myFilter(n) { return NodeFilter.FILTER_ACCEPT; }

  var myWalker =
 document.createTreeWalker(document.documentElement,NodeFilter.SHOW_ALL,myFilter,
false);
}
else
  alert("Error: Browser does not support DOM Traversal");

function update(currentElement)
{
  window.document.testform.nodeName.value = currentElement.nodeName;
  window.document.testform.nodeType.value = currentElement.nodeType;
  window.document.testform.nodeValue.value = currentElement.nodeValue;
}

var currentElement = myWalker.currentNode;
update(currentElement);

//-->>
<</script>>

<<form action="#" method="get">>
 <<input type="button" value="Parent" 
        onclick="myWalker.parentNode();update(myWalker.currentNode);" />>
 <<input type="button" value="First Child"
        onclick="myWalker.firstChild();update(myWalker.currentNode);" />>
 <<input type="button" value="Last Child"
        onclick="myWalker.lastChild();update(myWalker.currentNode);" />>
 <<input type="button" value="Next Sibling"
        onclick="myWalker.nextSibling();update(myWalker.currentNode);" />>
 <<input type="button" value="Previous Sibling"
        onclick="myWalker.previousSibling();update(myWalker.currentNode);" />>
 <<input type="button" value="Next Node"
        onclick="myWalker.nextNode();update(myWalker.currentNode);" />>
 <<input type="button" value="Reset to Root"
        onclick="myWalker.currentNode=document.documentElement;
 update(currentElement);" />>
<</form>>
<</body>>
<</html>>

While the Traversal API is not widely implemented, it is fairly easy to write your own recursive tree walking facility. Iteration is far easier and in effect is just a variation of document.all[].