10

我的 HTML 中有一些带有 class 的元素，我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
}

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

let nodeItems = document.querySelector(selectors);

但同样的问题。

4

3 回答 3

21

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

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

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

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

Iterables 可以在旧版浏览器中进行 polyfill。core-js为 DOM 可迭代对象提供polyfill。

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

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

for (const c of nodeItems) {
  // ...
}
于 2018-04-21T13:29:43.747 回答
7

只需使用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]
}
于 2018-04-21T13:20:06.510 回答
4

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

文档：传播

于 2018-04-21T13:23:02.340 回答