Question

我创建了一个简单的函数，它执行类似于getElementsByClassName（）的任务。它应该遍历DOM中的每个节点，并将具有匹配类的节点推送到数组中。我尝试使用类似于Crockford的walk_the_DOM方法的东西，但是，我的工作不起作用。该函数检索第一个DOM级别的节点，但不会更深入。有人能给我一个关于出了什么问题的提示吗？这是代码：

var getNodesWithClassname = function(classname) {
  var a = document.body;
  var ar = [];
  var getNodes = function(obj, classname) {
    if (obj.hasChildNodes()) {
      var child = obj.firstElementChild;
      while (child) {
        if (child.className === classname) {
          ar.push(child)
        }
        child = child.nextElementSibling;
      }
    }
  }
  getNodes(a, classname);
  return ar;
};

Answer 1

如果元素是带子元素的元素，则需要递归：

var getNodesWithClassname = function(classname) {
  var a = document.body;
  var ar = [];
  var getNodes = function(obj, classname) {
    if (obj.hasChildNodes()) {
      var child = obj.firstElementChild;
      while (child) {
        if (child.className === classname) {
          ar.push(child)
        }
        if (child.nodeType === 1 && child.childElementCount > 0) {
          getNodes(child, classname);
        }
        child = child.nextElementSibling;
      }
    }
  }
  getNodes(a, classname);
  return ar;
};

Answer 2

您没有递归，应该在函数getNodes()内调用getNodes。没有递归，它就无法深入到树中。

需要getNodes(child, classname);来电。

Answer 3

一个更简单的方法就是获取所有元素并过滤掉哪些元素具有类名。不需要递归，只需一次循环。

http://jsfiddle.net/3weJc/

var getNodesWithClassname = function (classname) {
    var nodes = document.getElementsByTagName("*");
    var nodesLength = nodes.length;
    var results = [];

    for(var i = 0; i < nodesLength; ++i){
        if(nodes[i].className === classname) results.push(nodes[i]);  
    }

    return results;
};

DOM行走功能不起作用

3 个答案: