如何迭代HTMLCollection？

Question

我在HTML中有一些带有类名为node-item的元素，我在组件中使用以下代码进行访问：

let nodeItems = document.getElementsByClassName('node-item');

当我记录nodeItems时，它会给我一个长度为4的HTMLCollection[]。

我尝试了很多方法，但仍然无法迭代nodeItems：

1- 第一次尝试：

let bar = [].slice.call(nodeItems);
for (var g of bar){
    console.log(g); //gives me nothing
} 

2- second try:

for(let c of <any>nodeItems) {
    console.log(c); //gives me nothing
}

我尝试了数组迭代和对象迭代，但仍然出现 undefined 或 error 的问题。我还尝试了：

let nodeItems = document.querySelector(selectors);

但是问题依旧。

- Fateme Fazli

---

两种方法都可以使用（尽管Array.from()比[].slice.call()更简洁）。您确定集合包含元素吗？请记住它是一个实时节点列表。请执行console.log(nodeItems.length)。 - Bergi

你的代码在控制台中运行正常，你还有更多的例子吗？ - romuleald

@Bergi @romuleald 我记录了 nodeItems，它给了我一个完整的 HTMLCollection，但是当我记录长度时，它给了我0。 - Fateme Fazli

那么你实际的问题就是在你尝试迭代它时，集合是空的，只有在后面（当DOM元素已经加载）才会填充。 - Bergi

@estus，TypeScript与此有什么关系？无论for of编译成迭代器还是数组索引计数，都应该可以工作。如果根据OPs的评论记录长度为“0”，那么问题就在于在错误的时间使用DOM。您能否重新关闭它？ - Bergi

Answer 1

nodeItems 是 HTMLCollection，它是类似数组的对象。

在现代浏览器中，它是可迭代的。启用 downlevelIteration 编译选项后，支持使用迭代器，此时它将是：

const nodeItems = document.getElementsByClassName('node-item');

for (const c of nodeItems) {
  // ...
}

在旧版浏览器中，可以使用polyfill来实现可迭代对象。 core-js 提供了 DOM 可迭代对象的 polyfills。

否则，可以将 nodeItems 转换为数组并像往常一样进行迭代：

const nodeItems = Array.from(document.getElementsByClassName('node-item'));

for (const c of nodeItems) {
  // ...
}

- Estus Flask

---

我有同样的情况，但这对我没有帮助。 - chandrakant

没有理由对一个正确的答案进行负评。如果它没有帮助，这意味着在您的情况下可能有所不同。考虑提出自己的问题并提供 https://stackoverflow.com/help/mcve ，以便用户可以复制该问题。 - Estus Flask

如果我使用Array.from()然后再使用typeof nodeItems，结果仍然是一个对象。 - geoidesic

@geoidesic typeof 不会告诉你任何信息。数组是对象。 - Estus Flask

Answer 2

只需使用 Array.from(document.getElementsByClassName('node-item')) 或扩展运算符 [...document.getElementsByClassName('node-item')]，并使用您在数组上使用的任何内容。除此之外，您还可以使用普通的 for 循环。

let nodeItems = document.getElementsByClassName('node-item');
for (let i = 0; i < nodeItems.length; i++) {
    // access current element with nodeItems[i]
}

- baao

---

我尝试运行代码，但控制台没有输出任何内容。我的HTMLCollection已经填满了，我将其记录下来，当我尝试使用[...document.getElementsByClassName('node-item')]时，它会给出错误提示HTMLCollectionOf<Element>'不是数组类型。 - Fateme Fazli

Answer 3

您可以在 document.querySelectorAll 上使用 展开运算符 以获得一个数组。

以下是代码片段：

let nodeItems = [...(document.querySelectorAll('.class1'))];

for (var g of nodeItems) {
  console.log( g.innerHTML ); 
}

<div class='class1'>Text 1</div>
<div class='class1'>Text 2</div>
<div class='class1'>Text 3</div>

文档：展开语法

- Eddie

---

谢谢！我总是记不住for..in和for.of之间的细微差别，特别是哪一个会真正等待await调用，所以对于我这个功能失调的大脑来说，这部分是无用的。但是我给你点赞，因为你提到了使用扩展运算符。它非常好用。 - undefined