javascript

Chapter 11: DOM Levels 2 and 3
Perhaps this is too much information, and you really only want to return the < li > elements that occur in
the traversal. This can be accomplished by using a filter, as shown in the following example:
var div = document.getElementById(“div1”);
var filter = function(node){
return node.tagName.toLowerCase() == “li” ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP;
};
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT,
filter, false);
var node = iterator.nextNode();
while (node !== null) {
alert(node.tagName);
node = iterator.nextNode();
}
//output the tag name
In this example, only < li > elements will be returned from the iterator.
The nextNode() and previousNode() methods work with NodeIterator ’ s internal pointer in the
DOM structure, so changes to the structure are represented appropriately in the traversal.
Firefox versions prior to 3.1 do not implement the createNodeIterator() method,
though they do support createTreeWalker() as discussed in the next section.
TreeWalker
TreeWalker is a more advanced version of NodeIterator . It has the same functionality, including
nextNode() and previousNode() , and adds the following methods to traverse a DOM structure in
different directions:
❑
❑
❑
❑
❑
parentNode() — Travels to the current node ’ s parent
firstChild() — Travels to the first child of the current node
lastChild() — Travels to the last child of the current node
nextSibling() — Travels to the next sibling of the current node
previousSibling() — Travels to the previous sibling of the current node
A TreeWalker object is created using the document.createTreeWalker() method, which accepts the
same three arguments as document.createNodeIterator() : the root to traverse from, which node types
347