时间戳

首页 > 解决方案 > 为什么我可以通过一些 NodeList 而不是所有的 forEach？

javascript - 为什么我可以通过一些 NodeList 而不是所有的 forEach？

问题描述

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

我最近注意到有时.forEach()有效，有时无效。经过一番研究，我发现您无法.forEach()通过NodeList. 然后我去了这个答案，发现你可以.forEach()在 NodeList 上。

注意：我还在下面添加了 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>

标签： javascriptarrayshtml

解决方案

这是因为querySelectorAll返回 a NodeList，但getElementsByClassName返回 a 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>

您必须先将 a 转换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>

推荐阅读