尝试重新创建getElementsByClassName

如何解决尝试重新创建getElementsByClassName

function getElementsByClassName(cls) {
  const result = [];
  const checkClass = (element) => {
    const children = element.children;
    for (let i = 0; i < children.length; i++) {
      if()
        if (children[i].contains(cls)) {
          result.push(children[i]); 
        }
      if (children[i].hasChildNodes()) {
     
        checkClass(children[i]);      }
    }
  };
  checkClass(document.body); 
  return result;
}

你好，全部。

据我了解，childNodes具有未定义的节点（如“文本”），它们无法通过.contain方法。

所以我从childNodes切换到childNodes，然后仍然收到与下面相同的错误消息。

getElementsByClassName("targetClassName")

VM1349:8 Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
    at checkClass (<anonymous>:8:23)
    at getElementsByClassName (<anonymous>:18:3)
    at <anonymous>:1:1

我理解问题与遍历节点列表然后尝试应用包含有关，但是我不明白为什么将其切换到元素而不是节点之后它不执行它。

请告知。

解决方法

据我了解，childNodes具有未定义的节点（如“文本”），它们无法通过.contain方法。

我不知道您所说的“未定义节点”是什么意思，但是文本节点是contains的完全有效参数：

const div = document.getElementById("x");
const text = div.firstChild;
console.log(text.nodeName);      // #text
console.log(div.contains(text)); // true

<div id="x">foo</div>

也就是说，在函数中使用children是合理的，因为只有Elements可以具有类，并且您的代码不需要处理文档片段（例如，检查其内容），因此您只需要查看在Elements而不是其他种类的节点上。

我认为这是此代码：

if (children[i].contains(cls)) {

给你

参数1的类型不是“节点”

您代码中的

cls是字符串，而不是Node。如错误所述，contains接受节点。它不接受字符串。

---

一些注意事项：

1. 用您自己的代码正确地重新创建getElementsByClassName是相当复杂的，因为它会返回实时 HTMLCollection，而不是像{{ 1}}可以。这意味着要正确地重新创建它，需要使用MutationObserver来跟踪一段时间内的变化并随着情况的变化更新您返回的列表。但是，要在没有“实时”功能的情况下重新创建它，您可能需要递归函数。

2. NodeList在用空格分隔的字符串中接受多个类名，而不仅仅是一个。

3. 它适用于整个文档，而不仅限于querySelectorAll（getElementsByClassName中的元素可以具有类）。

FWIW，非实时解决方案的一般形式可能如下所示：

body

或，作为Peter Seliger points out，您可以从getElementsByTagName的head开始，然后对其进行过滤。我认为这是一次学习练习，因此取决于学习练习的目的。

,

// ... non live collection approach ...
//
// - does not "know" `String.prototype.trim`,// - is unaware of `Array.prototype.includes` ...
// - ... as well as of `Element.prototype.classList`
//
function getElementsByClassName(node,className) {

  const regXSplitWS = (/\s+/);
  const regXTrimLeft = (/^\s+/);
  const regXTrimRight = (/\s+$/);

  function trim(str) {
    return str.replace(regXTrimLeft,'').replace(regXTrimRight,'');
  }
  function getClassList(str) {
    str = trim(String(str || ''));
    return (
      (!str && []) ||
      str.split(regXSplitWS)
    );
  }
  const classList = getClassList(className);

  function doesMatchClassNameQuery(elmClassList) {
    return (
      !!elmClassList.length &&
      !!classList.length &&
      classList.every(function (queryName) {
        return (elmClassList.indexOf(queryName) >= 0);
      })
    );   
  }

  function query(collector,elm/*,idx,collection*/) {
    if (doesMatchClassNameQuery(getClassList(elm.className))) {

      collector.push(elm);
    }
    // query recursively.
    return collector.concat(Array.from(elm.children).reduce(query,[]));
  }
  // start querying.
  return Array.from((node && node.children) || []).reduce(query,[]);
}


console.log(
  document.body.getElementsByClassName('baz bizz')
);
console.log(
  getElementsByClassName(document.body,'baz bizz')
);

console.log(
  document.body.getElementsByClassName('foo')
);
console.log(
  getElementsByClassName(document.body,'foo')
);

console.log(getElementsByClassName());
console.log(getElementsByClassName(null,'bar'));

console.log(getElementsByClassName(document.body));
console.log(document.body.getElementsByClassName(''));

.as-console-wrapper { min-height: 100%!important; top: 0; }

<div class="level-1 foo">
  <div class="level-2a bar">
    <div class="level-3a baz bizz" />
    <div class="level-3b buzz " />
  <div>
  <div class="level-2b baz">
    <div class="level-3c bizz buzz" />
    <div class="level-3d foo bar" />
  <div>
  <div class="level-2c bizz buzz">
    <div class="level-3e foo bar" />
    <div class="level-3f baz bizz" />
  <div>
<div>