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秒尝试：

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

我尝试了数组迭代和对象迭代，但仍然是undefined或error。也尝试过：

let nodeItems = document.querySelector(selectors);

但同样的问题。

Answer 1

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

它在现代浏览器中是可迭代的。启用downlevelIteration compiler option支持迭代器，在这种情况下它将是：

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

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

Iterables可以在旧版浏览器中进行填充。 core-js提供polyfills for DOM iterables。

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

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

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

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

您可以在document.querySelectorAll上使用传播运算符来创建数组。

这是一个片段：

＆＃13;

let nodeItems = [...(document.querySelectorAll('.class1'))];

for (var g of nodeItems) {
  console.log( g.innerHTML ); 
}

＆＃13;

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

＆＃13;

Doc：Spread

如何迭代HTMLCollection？

3 个答案: