javascript - Recursion down DOM tree

Question

This is code from Crockford's JavaScript: The Good Parts.

var results = [];

var walkDOM = function (node,func) {
        func(node);                     //What does this do?
        node = node.firstChild;
        while(node) {
            walkDOM(node,func);
            node = node.nextSibling;
        }

    };

I understand the code except for func(node). I guess the point is to pass node as a parameter in function func, but how will the browser understand it this way? node and func could be anything--so when the function is called it could read like this:

walkDOM(document.body,function(att) {
          node.getAttribute(att);
          results.push(node);
          });

When func is passed, walkDOM will process function(att) {...}(document.body)--which wouldn't make any sense. So why has Crockford chosen to include func(node)?

Answer 1

Yes this tree traversal function makes sense since :

• the function argument is supposed to know how to handle (any) nodes
• the first call argument is supposed to be a supported node (not document.body for instance, if func doesn't know how to handle it)

That said, this algorithm still looks incorrect to me, as it only explores through the first sibling ; other siblings will be simply ignored. So I would recommend using this more traditional approach instead :

function walk(node, func) {
   var children = node.childNodes;
   for (var i = 0; i < children.length; i++)  // Children are siblings to each other
       walk(children[i], func);
   func(node);
}

Note that version is "deep first" (i.e. not calling call func() before processing children), but I'd rather recommend it since func is likely to change nodes. This way the processing of a parent will be able to consider the latest state of its already-processed children before issuing possibly un-appropriate changes.