Javascript foreach函数[重复]答案

【问题标题】：Javascript foreach function [duplicate]Javascript foreach函数[重复]
【发布时间】：2021-03-25 19:39:05
【问题描述】：

我有以下代码：

var arAddresses = document.getElementsByClassName("ClsAnschrift");
arAddresses.forEach(element => console.log(element.innerHTML));

我收到以下错误： 未捕获的类型错误：arAddresses.forEach 不是函数 有什么问题？

【问题讨论】：

【解决方案1】：

使用Document.querySelectorAll()

var arAddresses = document.querySelectorAll(".ClsAnschrift");
arAddresses.forEach(element => console.log(element.innerHTML));

<div class="ClsAnschrift">1</div>
<div class="ClsAnschrift">2</div>
<div class="ClsAnschrift">3</div>

Document.getElementsByClassName() 的问题是（如文档中所述）

Document 接口的 getElementsByClassName 方法返回所有子元素的类数组对象...

类似数组的对象没有forEach 功能

【讨论】：

【解决方案2】：

因为arAddresses 是一个HTMLCollection。浏览器不支持在 HTMLCollection 上使用 forEach。您可以使用 for 循环来遍历 nodeList，也可以从 nodeList 制作数组，然后使用 forEach。

【讨论】：

【解决方案3】：

它不起作用的原因是当您尝试使用document.getElementsByClassName选择元素时，它返回HTMLCollection而不是数组，因此您需要先将其转换为Array，然后再对其应用forEach。

转换成数组使用：Array.from(variable)

这样使用：

var arAddresses = document.getElementsByClassName("ClsAnschrift");
Array.from(arAddresses).forEach(element => console.log(element.innerHTML));

【讨论】：

【解决方案4】：

试试这个：

Array.from(arAddresses).forEach(element => console.log(element.innerHTML));

【讨论】：

【解决方案5】：

HTMLCollection 不适用于 foreach，您可以改用“for ... of”。

var list = document.getElementsByClassName("ClsAnschrift");
for (const element of list) {
  console.log(element.innerHTML)
}

<div class="ClsAnschrift">a</div>
<div class="ClsAnschrift">b</div>

【讨论】：