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

Question

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

我最近注意到，.forEach() 有时有效，有时无效。经过一番研究，我发现你不能通过NodeList 来.forEach()。然后我去了this answer，发现你可以在NodeList上.forEach()。

注意：我还在下面添加了 2 个 sn-ps，其中 .forEach() 可以工作，但不能工作。它似乎适用于document.querySelectorAll()，但不适用于document.getElementsByClassName()，但为什么呢？他们不是都返回NodeList吗？

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

.forEach() 在这个 sn-p 上工作。

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() 在这个 sn-p 上不起作用。

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

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

如果您想迭代 HTMLCollection 无需转换任何内容，您可以使用：

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

我添加了一个 sn-p 来说明这很好用：

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 2

getElementsByClassName 返回没有forEach 方法的HTMLCollection。

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

Answer 3

这是因为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>