DOM 树向下递归

Question

这是来自 Crockford 的 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;
        }

    };

我理解除了 func(node) 之外的代码。我想重点是在函数 func 中将 node 作为参数传递，但是浏览器如何以这种方式理解它呢？ node 和 func 可以是任何东西——所以当调用该函数时，它可以读成这样：

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

当传递 func 时，walkDOM 将处理 function(att) {...}(document.body)——这没有任何意义。那么为什么 Crockford 选择包含 func(node) 呢？

Answer 1

是的，这个树遍历函数是有意义的，因为：

• 函数参数应该知道如何处理（任何）节点
• 第一个调用参数应该是受支持的节点（例如，不是 document.body ，如果func 不知道如何处理它）

也就是说，这个算法对我来说仍然看起来不正确，因为它只探索第一个兄弟；其他兄弟姐妹将被简单地忽略。因此，我建议使用这种更传统的方法：

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);
}

请注意，版本是“深度优先”（即在处理子项之前不调用 call func() ），但我宁愿推荐它，因为 func 可能会改变节点。这样，父进程的处理将能够在发出可能不适当的更改之前考虑其已处理的子进程的最新状态。

Answer 2

在我看来，func 用于对树中的每个节点执行某些操作。

例如，如果我想提醒整个树中每个节点的标签名称：

walkDOM(document.body, function(node) {
    alert(node.tagName);
});

在您的示例函数中：

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

...您已将 node 参数命名为 att，但这并不能神奇地生成属性的名称。我希望运行 node.getAttribute(att) 时出现“变量'node'未定义”，因为节点被设置为 att...没有该函数范围内的 node 。

Answer 3

该行中的 func

func(node)

就是通常所说的回调函数。它是可供 walkDOM 函数使用的函数。使用更详细的函数名称可能会有意义：

var results = [];

var walkDOM = function (node, iCanBeCalledOnANode) {
    iCanBeCalledOnANode(node); // Will be called on every DOM element 
    node = node.firstChild;
    while(node) {
        walkDOM(node,func);
        node = node.nextSibling;
    }

};

希望这可以帮助您解决问题。

Answer 4

Crockford 的代码将回调传递给 walkDOM，它可以通过多种方式使用来处理传递给它的参数。

一个示例是返回具有指定 tagName 的所有 DOM 元素的计数的方法：

var getTagNameCount = function(tagName) {
    var count = 0;
    walkDOM(document.body, function(node) {
       if (node.tagName === tagName) {
          count++;
       }
    });
    return count;
};