如何迭代 HTMLCollection？ [复制]

Posted 2023-02-14

【中文标题】如何迭代 HTMLCollection？ [复制]

【英文标题】：how to iterate on HTMLCollection? [duplicate]

【发布时间】：2018-10-02 00:38:47

【问题描述】：

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

但同样的问题。

【问题讨论】：

这两种方法都应该有效（尽管Array.from() 会比[].slice.call() 更干净）。您确定该集合确实包含这些元素吗？请记住，它是一个 live 节点列表。请做console.log(nodeItems.length)。

您的代码在控制台中运行时正在运行，您有更多示例吗？

@Bergi @romuleald 我记录了nodeItems，它给了我一个完整的 HTMLCollection，但是当记录长度时它给了我 0。

那么你的实际问题只是当你尝试迭代它时集合是空的，并且它只是在以后才被填充（当DOM元素被加载时）。

@Bergi 这不是列出的问题的重复，因为该问题特定于 TS。不过，我很确定某处存在规范的 TS 问题。

【参考方案1】：

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) 
  // ...

【讨论】：

我有同样的情况，但这对我没有帮助。

没有理由对正确答案投反对票。如果它没有帮助，这意味着您的情况可能有所不同。考虑提出您自己的问题并提供 ***.com/help/mcve ，以便用户可以复制该问题。

如果我先Array.from() 然后typeof nodeItems 它仍然是一个对象。

@geoidesic typeof 不会告诉你任何事情。数组是对象。

【参考方案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]

【讨论】：

我尝试了代码，但控制台没有记录任何内容。我的 HTMLCollection 已满，我将其记录下来，尝试 [...document.getElementsByClassName('node-item')] 时出现错误 HTMLCollectionOf<Element>' is not an array type。

【参考方案3】：

您可以在document.querySelectorAll 上使用扩展运算符来创建一个数组。

这是一个sn-p：

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>

文档：Spread