如何迭代HTMLCollection？

Question

我的HTML中有一些带有类的元素,我node-item在组件中使用以下命令访问它们:

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

当我记录nodeItems它给我一个HTMLCollection[]长度为4.

我尝试了很多方法,但仍无法迭代nodeItems:

1-首先尝试:

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

2秒尝试:

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

我尝试了数组迭代和对象迭代,但仍然undefined或error.还尝试过:

let nodeItems = document.querySelector(selectors);

但同样的问题.

Answer 1

您可以使用展开运算符来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>

文档：传播

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]
}

Answer 3

nodeItems是HTMLCollection,类似于数组的对象.

它在现代浏览器中是可迭代的.启用downlevelIteration编译器选项支持迭代器,在这种情况下它将是:

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

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

Iterables可以在旧版浏览器中进行填充.为DOM迭代core-js提供polyfill.

否则nodeItems可以像往常一样转换为数组并迭代:

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

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