5

I found this ridiculously technical document:

http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-Document

but did not see how it related to writing actual JavaScript code.

I would guess that I could use basic DOM methods and properties like eachChild() and .children to do the traversal, but I'm not sure what the best strategy is?

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
Handy
  • 163
  • 8
  • What is ridiculously technical with `depth first, pre-order traversal, which is equivalent to the order in which the start tags occur in the text representation of the document`? – Frédéric Hamidi Aug 24 '13 at 21:35
  • What do you want to do? In modern browsers, there are lots of helper APIs to find elements with particular qualities. – Pointy Aug 24 '13 at 21:42
  • @Handy, `DocumentTraversal` is an interface that provides document-ordered iterators and can be implemented by the `document` instance your browser provides. If your browser supports [document.createNodeIterator()](https://developer.mozilla.org/en-US/docs/Web/API/Document.createNodeIterator) and [document.createTreeWalker()](https://developer.mozilla.org/en-US/docs/Web/API/document.createTreeWalker), then you can indeed access that interface from Javascript. – Frédéric Hamidi Aug 24 '13 at 21:42
  • JavaScript does not have interfaces, in the programming sense ... http://stackoverflow.com/questions/3710275/does-javascript-have-the-interface-type-such-as-javas-interface – Handy Aug 24 '13 at 21:48
  • @Handy, that interface is an abstraction device used by the Javascript implementation you're working with. On the JS side, `document` either implements these methods or it doesn't, and you can check for that. – Frédéric Hamidi Aug 24 '13 at 21:49
  • ...so like I thought...just a way to group together a bunch of functionality ... – Handy Aug 24 '13 at 21:50
  • @Handy, it can also be considered as some kind of contract. Wikipedia even calls them [protocols](http://en.wikipedia.org/wiki/Protocol_%28object-oriented_programming%29) now. – Frédéric Hamidi Aug 24 '13 at 21:51

2 Answers2

9

Once you get the root node, you only need firstChild and nextSibling. This is Douglas Crockford's function for that, from his book JavaScript - The Good Parts, p. 35:

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while(node) {
        walk(node, func);
        node = node.nextSibling;
    }
}

It's meant to traverse the DOM from the given node, and run a callback on each node found. For example:

walk_the_DOM(document.body, function(node) {
    console.log(node);
});
bfavaretto
  • 71,580
  • 16
  • 111
  • 150
  • This gives you a good example of traversing the DOM: http://javascript.info/tutorial/traversing-dom – Trendy Aug 24 '13 at 21:37
  • 1
    @Handy That's more for browser vendors / implementation providers. In any case, it documents the whole DOM API standards. F.J's answer is based on stuff mentioned there (the `createNodeIterator` function). – bfavaretto Aug 24 '13 at 21:38
4

Here is one way to do this using document.createNodeIterator:

var nodeIterator = document.createNodeIterator(document.body);
var currentNode;
while (currentNode = nodeIterator.nextNode()) {
    console.log(currentNode);
}
Andrew Clark
  • 202,379
  • 35
  • 273
  • 306