Javascript 使用递归从头开始实现getElementByClassName

我有一个提示，使用

document.body

、

element.classList

和

element.childNodes

和递归构建一个getElementByClassName函数。 这就是我所拥有的：

var getElementsByClassName = function(className
) {
  var classNameArray = [];
  var bodyElement = document.body;
  var traverseTheNode = function(elementNode) {
    if (elementNode.classList.contains(className)) {
      classNameArray.push(elementNode);
    }
    elementNode.childNodes.forEach(function(node) {
      if (node.classList === undefined) {
        return;
      } else if (node.classList.contains(className)) {
        classNameArray.push(node);
      } else {
        return traverseTheNode(node);
      }
    });
  }
};

console.log(getElementsByClassName('targetClassName'))

---

代码执行我希望它执行的操作，但当我输入console.log时，它会抛出一个错误。“无法读取null类列表的属性”谈论第一个if语句。有什么想法吗？

我发现了一个不同的问题。数组没有返回一个类的所有实例，只返回一个实例。我重新组织了if语句，以便它在其他条件之前遍历一个节点的子节点，现在它似乎返回所有匹配的节点

var getElementsByClassName=函数（类名）{
var classNameArray=[]；
var bodyElement=document.body；
var traverseTheNode=函数（elementNode）{
if（elementNode.classList.contains（className））{
push（elementNode）；
}
elementNode.childNodes.forEach（函数（节点））{
if（node.hasChildNodes（））{
返回节点（node）；
}else if（node.classList==未定义）{
返回；
}else if（node.classList.contains（className））{
push（节点）；
}
});
}
遍历节点（bodyElement）；
//console.log（classNameArray）
返回classNameArray；
};
log（getElementsByClassName（'three'））

嗯

这将上述内容转化为更具功能性的风格：

const gebcn=（类名）=>（元素）=>
（Array.from（element.classList | |[]）。includes（className）
？[要素]
: []
)康卡特先生(
元素hasChildNodes（）
？数组.from（元素.childNodes）.flatMap（gebcn（类名））
: []
)
const getElementsByClassName=（className）=>gebcn（className）（document.body）
console.log（getElementsByClassName（'three'））

嗯

我将您的函数放在一个代码片段中，并用几种不同的html配置进行了测试——它们都能正常工作。你能发布你正在测试的HTML吗？哇。我不敢相信我离得有多近。我花了大半天的时间在这上面，也许我应该休息一下哈。谢谢，伙计，看起来很棒！