Internet Explorer - DOM Traversal

[AWS]

The latest Platform Preview Build includes two great interoperable features for working with the DOM &ndash DOM Traversal and Element Traversal. These features provide web developers with simple, flexible, and fast ways of traversing through a document using the same markup across browsers. These features come in the form of flat enumeration, simplifying the DOM tree to an iterative list, and filtering which enables you to tailor the set of nodes you traverse. These features work with the same markup across browsers &ndash you can try out any of the code here in the IE9 platform preview and other browsers.

 

 

Without these features, finding an element of interest on a page requires you to do one or more depth-first traversals of the document using firstChild and nextSibling. This is usually accomplished with complex code that runs slowly. With the DOM and Element Traversal features, there are new and better ways of solving the problem. This blog post is a primer and provides a few best practices to get you on your way.

 

 

I&rsquoll start with Element Traversal, since it&rsquos the simplest of the interfaces and follows familiar patterns for enumerating elements in the DOM. Element Traversal is essentially a version of DOM Core optimized for Elements . Instead of calling firstChild and nextSibling, you call firstElementChild and nextElementSibling. For example:

 

if (elm.firstElementChild)

{

elm = elm.firstElementChild

 

while (elm.nextElementSibling)

{

// Do work...

}

}

 

 

 

 

This is faster and more convenient, saving you the trouble of having to check for text and comment nodes when you&rsquore really only interested in elements.

 

 

DOM Traversal is designed for much broader use cases. First, you create a NodeIterator or a TreeWalker. Then you can use one of the iteration methods to traverse the tree:

 

var iter = document.createNodeIterator(elm, NodeFilter.SHOW_ELEMENT, null, false) // This would work fine with createTreeWalker, as well

 

var node = iter.nextNode()

while (node = iter.nextNode())

{

node.style.display = "none"

}

 

 

 

 

The codepath above iterates through a flat list of all nodes in the tree. This can be incredibly useful since in many cases you don&rsquot care whether something is a child or sibling of something else, just whether it occurs before or after your current position in the document.

 

 

A big benefit of DOM Traversal is that it introduces the idea of filtering, so that you only traverse the nodes you care about. While nodeIterator only performs flat iterations, TreeWalker has some additional methods, like firstChild(), that let you see as much or as little of the tree structure as you want.

 

 

The SHOW_* family of constants provides a way to include broad classes of nodes, such as text or elements (like SHOW_ELEMENT in the earlier example). In many cases, this will be enough. But when you need the most precise control, you can write your own filter via the NodeFilter interface. The NodeFilter interface uses a callback function to filter each node, as in the following example: