为什么我可以遍历某些NodeList，但不是全部？

Question

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

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

注意：：我还在下面添加了2个摘要，其中.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>

{{$periode->pakan->sum('jumlah_masuk')}}

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