将递归节点遍历转换为迭代节点遍历

Question

I have a recursive algorithm for traversing nodes in a document tree in tree order

How would this be made iterative? My attempt at making it iterative completely failed

function recursivelyWalk(nodes, cb) {
    for (var i = 0, len = nodes.length; i < len; i++) {
        var node = nodes[i],
            ret = cb(node)

        if (ret) {
            return ret
        }

        if (node.childNodes.length) {
            var ret = recursivelyWalk(node.childNodes, cb)
            if (ret) {
                return ret
            }
        }
    }
}

Answer 1

What about concatenating the child nodes if there are any, and using a while(nodes.length) loop? Basically, keep adding new nodes to the stack, and keep running the loop (testing one node each time) until the stack is empty: http://jsfiddle.net/gEm77/1/ .

var z = 0; // my precaution for a while(true) loop

function iterativelyWalk(nodes, cb) {
    nodes = [].slice.call(nodes);

    while(++z < 100 && nodes.length) {
        var node = nodes.shift(),
            ret = cb(node);

        if (ret) {
            return ret;
        }

        if (node.childNodes.length) {
            nodes = [].slice.call(node.childNodes).concat(nodes);
        }
    }
}

Answer 2

This article (linked from Wikipedia's article on tree traversal ) gives an algorithm in JavaScript for iterative preorder traversal of a DOM tree. To quote:

 function preorderTraversal(root) { var n = root; while(n) { // If node have already been visited if (nv) { // Remove mark for visited nodes nv = false; // Once we reach the root element again traversal // is done and we can break if (n == root) break; if (n.nextSibling) n = n.nextSibling; else n = n.parentNode; } // else this is the first visit to the node else { // // Do something with node here... // // If node has childnodes then we mark this node as // visited as we are sure to be back later if (n.firstChild) { nv = true; n = n.firstChild; } else if (n.nextSibling) n = n.nextSibling; else n = n.parentNode; } } } 

Note the line " // Do something with node here... ", which is where you can call your callback function.

Check out the full article for more information.