Javascript 硬编码getElementsByClassName递归（element.className vs.element.classList.contains）

在多次尝试硬编码递归getElementsByClassName方法之后，我解决了以下问题：

var getElementsByClassName = function(className) {
  var result = [];

  function inspect(element) {
    var children = element.children;
    for(var i = 0; i < children.length; i++) {
      if(children[i].classList.contains(className)) {
        result.push(children[i]);
      }
      if(children[i].hasChildNodes) {
        inspect(children[i]);
      }
    }
  }

  inspect(document);
  return result;
};

var getElementsByClassName=函数（类名）{
var结果=[]；
功能检查（元件）{
var children=element.children；
对于（变量i=0；i

但是，考虑到className返回了我们可以测试的值，我不明白为什么这个解决方案不起作用：

var getElementsByClassName = function(className) {
  var result = [];

  function inspect(element) {
    if (element.className === className) result.push(element);

    var children = element.children;
    for(var i = 0; i < children.length; i++) {
      inspect(children[i]);
    }
  }

  inspect(document);
  return result;
};

var getElementsByClassName=函数（类名）{
var结果=[]；
功能检查（元件）{
if（element.className==className）result.push（element）；
var children=element.children；
对于（变量i=0；i

提前感谢您的帮助，如果您对改进我的代码有任何其他建议，请告诉我

您的if语句需要更新，因为在某些情况下，元素可以有多个类。目前，您正在测试是否只有一个类。您可以使用contains方法，使用indexOf检查它，正如我在下面所做的，以查看所需的类名是否在列表中

调用递归调用时，您使用的是文档。我不太确定，但我相信你想打电话给文件。身体。。。这意味着您试图在第一次调用函数时将var children分配给document.children，但是您希望调用document.body.children以及if语句document.body.classname…因此，在调用递归调用时，它应该是inspect（document.body）。如果要使用document，则必须使用document.childNodes…但是最好使用document.body.children，因为document.childNodes会在每个元素之间的结果中添加空格。因此，如果有3个子节点，则document.body.children的长度将为3，但document.childNodes的长度将为5。可以使用childnodes而不是childen来执行相同的函数，但是在这种情况下，最好在if块中包含方法

这里有一个使用你的算法的u的解决方案，但是有更好的方法来实现，你也可以不用内部函数来实现

var getElementsByClassName = function(className) {
  var result = [];

  function inspect(element, result) {
    var children = element.children;
    var parts = element.className.split(' ');
    if(parts.indexOf(className) >= 0){
      result.push(element);
    }
    for(var i = 0; i < children.length; i++) {
      inspect(children[i], result);
    }
  }

  inspect(document.body, result);
  return result;
};

var getElementsByClassName=函数（类名）{
var结果=[]；
功能检查（元素、结果）{
var children=element.children；
var parts=element.className.split（“”）；
if（parts.indexOf（className）>=0）{
结果：推（元素）；
}
对于（变量i=0；i

什么不起作用？究竟发生了什么？这只是关于

classname

vs

classlist

，还是您在询问不同的代码结构？仅供参考，

在
if
语句中未调用hasChildNodes

。相反，你是在计算函数本身，如果定义的话，它总是

true

。你的第二个解决方案对我来说很好。不过，检查

子项是否确实存在可能是个好主意。当然，当存在多个类时，
className
比较将失败。是的，如果HTML元素都在初始加载期间呈现，则这两种解决方案都有效。但是，如果稍后通过JS更新/添加元素，则第二个解决方案将失败。因此，我无法理解为什么第二个不能正常工作。