Question

我试图写getElementsByClassName()而不使用getElementsByClassName方法或_。方法。我想对只有一个参数的函数使用递归，然后将每个值推入数组。后记返回该数组。下面是到目前为止的代码。我尝试了多个版本，我在做什么错？谢谢您的帮助。

我意识到这个问题已经被问过并得到回答。但是，我试图只使用一个参数来编写函数，而其他参数则使用两个。我也没有使用_。下划线方法，其他人使用下划线。我需要使用不带下划线，仅一个参数的递归，并且不能使用getElementsByClassName方法。我已经为此工作了一段时间，并且希望得到一些帮助！

var getElementsByClassName = function(className) {
  var nodeArray = [];
  var fakeNode = [1,2,3,4,5,6,7];

  // var variableNode = document.getElementsByClassName(className); // ['element 1', 'element 2', 'element 3']

  if(document.nodeName === className) {
  var variableNode = document.querySelector(className);

  // base case: 
    if (variableNode.length === 0) {
        return [];

  // rec case:
    } else {
        for(var i = 0; i < variableNode.length; i++) {
            nodeArray.push(variableNode[i]);
        }
        getElementsByClassName();
    }
  }
  return nodeArray;
};

Answer 1

为了递归执行此操作，您需要遍历DOM层次结构。这意味着该函数必须从DOM节点开始，然后对其所有子节点进行递归调用。在每个级别，它创建一个结果数组；如果符合条件，它将添加当前节点，将子节点的结果连接起来，然后返回该结果。

function getElementsByClassName(className, node = document) {
  var nodeArray = [];
  if (node.classList && node.classList.contains(className)) {
    nodeArray.push(node);
  }
  if (node.children) {
    for (var i = 0; i < node.children.length; i++) {
      nodeArray = nodeArray.concat(getElementsByClassName(className, node.children[i]));
    }
  }
  return nodeArray;
}

console.log(getElementsByClassName("a").map(e => e.id));
console.log(getElementsByClassName("b").map(e => e.id));

<div id="foo" class="a">
  <div id="bar" class="b">
    <span id="span-1" class="a">abc</span>
    <span id="span-2" class="b">def</span>
  </div>
  <h1 id="header-1" class="a">Header</h1>
</div>

递归的基础是当您到达没有子节点的节点时，因为node.childNodes.length将是0，并且不会进入循环。

注意node参数的默认值。这样，您可以使用一个参数调用该函数以搜索整个文档，但是在递归时它将使用第二个参数。

getElementsByClassName，递归，一个参数，没有underscore.js

1 个答案: