javascript - 如何迭代 HTMLCollection？

<分区>

我的 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);

但同样的问题。

最佳答案

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

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

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

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

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

否则 nodeItems 可以转换为数组并照常迭代:

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

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

关于javascript - 如何迭代 HTMLCollection？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49956141/

相关文章：

angular - 图标未在 Angular 2 中显示