JavaScript Editor JavaScript Debugger     JavaScript Editor 

Team LiB
Previous Section Next Section

DOM Traversal API

The DOM Traversal API ( 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.


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"
<<html xmlns="">>
<<title>>DOM Test<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<h1>>DOM Test Heading<</h1>>
<<hr />>
<<!-- Just a comment -->>
<<p>>A paragraph of <<em>>text<</em>> is just an example<</p>>
   <<li>><<a href="/">>Yahoo!<</a>><</li>>

<<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 />>

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

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

  var myWalker =
  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;


<<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"
 update(currentElement);" />>

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[].

Team LiB
Previous Section Next Section

JavaScript Editor JavaScript Debugger     JavaScript Editor