typescript 如何迭代 HTMLCollection？

how to iterate on HTMLCollection?

提问by Fateme Fazli

I have some elements in my HTML with class node-item, I access them in my component using:

我的 HTML 中有一些带有 class 的元素，我node-item在组件中使用以下方法访问它们：

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

and when I log nodeItemsit gives me a HTMLCollection[]with length 4.

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

I tried many ways but still can't iterate on nodeItems:

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

1- first try:

1-第一次尝试：

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

2- second try:

2 秒尝试：

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

And I tried array iteration and object iteration but still undefinedor error. also tried:

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

let nodeItems = document.querySelector(selectors);

let nodeItems = document.querySelector(selectors);

But same problems.

但同样的问题。

回答by Estus Flask

nodeItemsis HTMLCollection, which is array-like object.

nodeItemsis HTMLCollection，它是类数组对象。

It is iterable in modern browsers. Iterators are supported with downlevelIterationcompiler optionenabled, in this case it will be:

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

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

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

Iterables can be polyfilled in older browsers. core-jsprovides polyfills for DOM iterables.

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

Otherwise nodeItemscan be converted to array and iterated as usual:

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

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

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

回答by baao

Just use Array.from(document.getElementsByClassName('node-item'))or the spread operator [...document.getElementsByClassName('node-item')]and use whatever you would use on an array.

只需使用Array.from(document.getElementsByClassName('node-item'))或 展开运算符[...document.getElementsByClassName('node-item')]并使用您将在数组上使用的任何内容。

Apart from that, you could also use a normal forloop

除此之外，您还可以使用普通for循环

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

回答by Eddie

You can use spread operatoron document.querySelectorAllto have an array.

您可以使用传播操作上document.querySelectorAll有一个阵列。

Here is a snippet:

这是一个片段：

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>

Doc: Spread

文件：传播