数组与 NodeList 上的 .forEach() (JavaScript)

Question

我想知道的

我听说有时需要将 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>

但是我无法理解 with/without Array.from() 之间的区别。

Answer 1

看

NodeLists and Arrays are two different things because NodeLists are actually not a JavaScript API, but a browser API.

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

来操作它们

NodeLists 在另一个有意义的方面也不同于 Arrays。

它们通常是实时列表，这意味着如果元素被删除或添加到 DOM，列表会自动更新。 querySelector() 和 querySelectorAll() return 是一个静态列表（一个不会更新的列表），但是像 .childNodes 这样的属性是实时列表，当您操作 DOM（其中可以是好事也可以是坏事，这取决于你如何使用它。

这一切都变得更加混乱，因为数组可以包含节点。并且，还有另一种称为 HTMLCollection 的较旧类型的列表，它早于 NodeLists，但功能相似（改天的另一篇文章）。

The key way to think about NodeLists vs. Arrays: NodeLists are a language-agnostic way to access DOM elements, and Arrays are a JavaScript object you can use to contain collections of stuff.

它们每个都有自己的方法和属性，如果需要，您可以将 NodeList 转换为数组（但反之则不行）。

数组与 NodeList 上的 .forEach() (JavaScript)

.forEach() on Arrays vs NodeList (JavaScript)

javascript

foreach

nodelist

我想知道的

我试过的