。forEach（）关于数组vs NodeList（JavaScript）[重复]

Question

此问题已经在这里有了答案：

Why doesn't nodelist have forEach?（10个回答）

Why it is not possible to call forEach on a nodeList?（3个答案）

forEach on querySelectorAll not working in recent Microsoft browsers（3个答案）

Difference between HTMLCollection, NodeLists, and arrays of objects（5个答案）

[<9小时前关闭。

我想知道

我听说有时需要将NodeLists更改为Arrays才能使用forEach（）方法。我必须在哪种情况下这样做？

---

我尝试过的

我写了这个：

const items = document.querySelectorAll('.js-li');
const arrItems = Array.from(items);

items.forEach((v, i, a) => console.log(`${v} / ${i} / ${a}`));
arrItems.forEach((v, i, a) => console.log(`${v} / ${i} / ${a}`));

<ul>
  <li class="js-li">zero</li>
  <li class="js-li">one</li>
  <li class="js-li">two</li>
  <li class="js-li">three</li>
  <li class="js-li">four</li>
</ul>

但是我无法理解使用/不使用Array.from（）之间的区别。

Answer 1

看

NodeLists和Arrays是两件事，因为NodeLists是实际上不是JavaScript API，而是浏览器API。

querySelectorAll()和getElementsByTagName()之类的东西不是JavaScript方法，它们是浏览器API，可让您访问DOM元素。然后，您可以使用JavaScript操作它们。

NodeList与数组也有另一种有意义的方式。

它们通常是实时列表，这意味着如果元素被删除或添加到DOM，列表将自动更新。 querySelector()和querySelectorAll()返回一个静态列表（一个不会更新的列表），但是诸如.childNodes之类的属性是活动列表，它们在您操作DOM时会发生变化（取决于您的方式，这可能是好事，也可能是坏事）正在使用它。）>

由于数组可以包含节点，所以这一切都更加令人困惑。而且，还有另一种较旧的列表类型，称为HTMLCollection，它早于NodeLists，但功能相似（另一篇文章改天）。

思考NodeList与数组的关键方法：NodeList是一个语言不可知的方式来访问DOM元素，而数组是一种您可以用来包含内容集合的JavaScript对象。

它们各自具有自己的方法和属性，并且您可以根据需要将NodeList转换为Array（但不必相反）。