Javascript 如何迭代HTMLCollection？

我的HTML中有一些元素与类

节点项

，我使用以下方法在组件中访问它们：

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

当我记录

nodeItems

时，它会给我一个长度为4的

HTMLCollection[]

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

节点项

：

1-首先尝试一下：

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

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

2秒尝试：

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

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

for（让c为节点项）{
console.log（c）；//什么也没给我
}

我尝试了数组迭代和对象迭代，但仍然

未定义

或

错误

。还尝试：

let nodeItems=document.querySelector（选择器）

但是同样的问题。
只需使用
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]
}

let nodeItems=document.getElementsByClassName（'node-item'）；
for（设i=0；i
您可以在
document.querySelectorAll
上使用扩展运算符来创建数组

以下是一个片段：


let nodeItems=[…（document.querySelectorAll（'.class1'））]；
for（节点的var g）{
log（g.innerHTML）；
}
Text 1
文本2
文本3是类似数组的对象

它在现代浏览器中非常适用。启用时支持迭代器，在这种情况下，迭代器将是：

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

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

Iterables可以在较旧的浏览器中进行多填充<代码>核心js
提供

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

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

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

这两种方法都应该有效（尽管
Array.from（）
比
[].slice.call（）
更干净）。您确定集合中确实包含这些元素吗？请记住，它是一个活动节点列表。请执行
console.log（nodeItems.length）
。在控制台中执行操作时，您的代码正在工作，您有更多示例吗？@Bergi@romuleald我记录
nodeItems
，它给我一个完整的HTMLCollection，但当记录长度时，它给我0。那么您的实际问题是，当您尝试迭代它时，集合是空的，它只是在以后（当DOM元素被加载时）才被填充。@Bergi这不是列出的问题的重复，因为这个问题是特定于TS的。我很确定在某个地方有一个规范的TS问题。我尝试了代码，但控制台没有记录任何内容。我的HTMLCollection已满，我将其记录在日志中，尝试时，
[…document.getElementsByClassName（'node-item'）]
它会给我错误，
HTMLCollectionOf'不是数组类型
。我有相同的情况，但这对我没有帮助。没有理由否决正确的答案。如果没有帮助，这意味着你的情况可能会有所不同。考虑问你自己的问题并提供，所以问题可以由用户复制。如果我做了代码>数组。从（）/代码>然后<代码> NoDEsType < /代码>它仍然是一个对象。@ GeordeSic <代码> Type of < /Cord>不会告诉你任何事情。数组是对象。