为什么我可以通过一些NodeList而不是全部？

Question

当我在这个网站上回答问题时，我开始更多地使用.forEach()。我也开始使用document.getElementsByClassName()或document.querySelectorAll()了很多。

我最近注意到，有时，.forEach()工作，有时它没有。经过一些研究，我发现你不能通过.forEach() NodeList。然后我去了this answer，发现你可以在NodeList上使用.forEach()。

注意：我还在下面添加了两个.forEach()工作的片段，但不起作用。它似乎适用于document.querySelectorAll()而不是document.getElementsByClassName()，但为什么呢？难道他们都不回归NodeList？

TL; DR：为什么我可以在一些.forEach()上NodeLists，但不是全部？

.forEach()在这个片段上工作。

let text = document.querySelectorAll(".text");

console.log(typeof text);
text.forEach(e => {
  console.log(e);
});

<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>

.forEach()不适用于此片段。

let text = document.getElementsByClassName("text");

console.log(typeof text);
text.forEach(e => {
  console.log(e);
});

<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>

Answer 1

这是因为querySelectorAll返回NodeList，但getElementsByClassName返回HTMLCollection：

let querySelector = document.querySelectorAll(".text");
let className = document.getElementsByClassName("text");
console.log(querySelector.constructor.name);
console.log(className.constructor.name);

<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>

您必须先将HTMLCollection转换为数组，然后才能迭代它：

let text = Array.from(document.getElementsByClassName("text"));

text.forEach(e => {
  console.log(e);
});

<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>
<div class="text">Text</div>

Answer 2

这是因为getElementsByClassName不返回数组而是HTMLCollection。它是一个array-like对象，如文档中所述。

如果你想迭代HTMLCollection而不必转换任何东西，你可以使用：

const list = document.getElementsByClassName('text');
const matches = Array.prototype.forEach.call(list, (el) => console.log(el));

我添加了一个片段来澄清这个工作正常：

const list = document.getElementsByClassName('text');
const matches = Array.prototype.forEach.call(list, (el) => console.log(el));

  <div class="text"></div>
  <div class="text"></div>
  <div class="text"></div>
  <div class="text"></div>

参考文献：

1. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
2. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Answer 3

getElementsByClassName返回没有HTMLCollection方法的forEach。

let text1 = document.querySelectorAll(".text");
let text2 = document.getElementsByClassName("text");

console.log(text1.forEach);
console.log(text2.forEach);

<div class="text">Text</div>

参考：https://developer.mozilla.org/ko/docs/Web/API/Document/getElementsByClassName