Document Object Model Level 2 Traversal and Range modules provide properties and methods that allow scripts to dynamically traverse, identify and manipulate a range of content in a document. The Traversal API defines advanced techniques for traversing a document and filtering out nodes that are not of interest. The Range API defines methods for manipulating contiguous ranges of document content, even when that content does not begin or end at a node boundary.

DOM Level 2 specification’s Traversal and Range module interfaces are not mandatory for compliance. The Internet Explorer has limited support for these two modules. To test if a DOM compliant browser supports these modules use the following:


document.implementation.hasFeature("Traversal", 2.0)  // True if supported

document.implementation.hasFeature("”Range”", 2.0)  // True if supported

Traversal module

DOM Level 2 Traversal and Range module define three different interfaces, namely TreeWalker, NodeIterator and NodeFilter to help in selective traversal of documents contents. NodeIterators and TreeWalkers are two different ways of representing the nodes of a document subtree and a position within the nodes they present. 

The NodeIterator object provides a flattened sequential view of the nodes in a document. Because this view is presented without respect to a hierarchy, iterators have methods to move forward and backward, but not to move up and down. The nextNode( ) and previousNode( ) methods of the NodeIterator object allows to traverse selected parts of a document until the required node or nodes are found, or until it returns null, indicating that it has reached the end of the document.

The TreeWalker object maintains the hierarchical relationships of the subtree, allowing navigation of this hierarchy because this object does not flatten the document nodes. The TreeWalkers are better for tasks in which the structure of the document around the selected nodes are to be traversed and manipulated, while the NodeIterators are better for tasks that focus on the content of each selected node.

The NodeFilter is a user written function that checks with each node and determines if a node should be part of the traversal’s logical view of the document or not. The NodeFIlter has to be used in conjunction with NodeIterator and TreeWalker traversal methods. The NodeFilter is not concerned with structure of the DOM nor the traversal logic. The  acceptNode() method of a NodeFIlter allows NodeIterator and TreeWalker to pass a node to a filter and check if the node should be filtered. The acceptNode() can return FILTER_ACCEPT argument to accept the given node in the document, FILTER_REJECT to reject a node and its children in a document and FILTER_SKIP to just reject the node but consider its children for further evaluation using acceptNode().

Range module

The DOM 2 Range module identifies a range of a contiguous content in a document between two boundary points. A Range can start and end at any point, and the start and end point may even be the same [empty range]. The Range interface provides methods for accessing and manipulating the document tree at a higher level than similar methods in the Node interface. Each of the methods in the Range interface maps directly to a series of DOM Core Methods, so the Range interface is actually just a set of convenient methods to make such manipulations easier.

Range can be used to select nodes and text between two range boundaries, regardless of node boundaries. They are useful when regular DOM manipulation isn’t sufficient to change the document. 

Document’s createRange() method is used to create a range; the Range’s selectNode() and selectNodeContents() methods are used to select nodes into the Range. Properties of Range interface like startContainer,  endContainer,  startOffset, and endOffset give details about start of the range of a document selected and its parent/enclosing node. They are all discussed in detail in next part of the tutorial.


›› go to examples ››