DOM Traversal API | JavaScript: The Complete Reference, Second Edition

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=ISO-8859-1" />> <</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="http://www.yahoo.com">>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[] .