javascript - 从头开始使用递归 getElementsByClassName

Question

我的代码不起作用，我不知道为什么。

var getElementsByClassName = function(className){
  let result = [];
  let child = document.body.childNodes;
  function nodeRecusion(node) {
    for (let i = 0; i < node.length; i++) {
      let current = node[i];
      if (current.classList.contains(className)) {
      result.push(node[i]);
      }
      if (current.childNodes.length) {
      nodeRecusion(current);
      }
    }
  }
  nodeRecusion(child);
  return result;
};

我收到的错误是“无法读取未定义的属性.contains”。我不明白这个问题。是没有正确接收子项还是我尝试递归调用它的方式有问题？

Answer 1

classList属性可用于 Element类而不是 Node界面。

您可以使用document.body.children来代替。

var getElementsByClassName = function(className) {
  let result = [];
  let child = document.body.children;

  function nodeRecusion(node) {
    for (let i = 0; i < node.length; i++) {
      let current = node[i];
      if (current.classList.contains(className)) {
        result.push(node[i]);
      }
      if (current.children.length) {
        nodeRecusion(current);
      }
    }
  }
  
  nodeRecusion(child);
  return result;
};

console.log(getElementsByClassName('ele'));

<p class='ele'></p>
<span class='ele'></span>
<span class='stack'></span>