使用foreach循环一个类元素[重复]答案

【问题标题】：Using foreach to loop through a class element [duplicate]使用foreach循环一个类元素[重复]
【发布时间】：2018-07-31 00:15:35
【问题描述】：

我将 getElementsByClassName 中的所有元素存储到一个变量中，我想我可以 foreach 循环这个变量以从中获取每个 id。但它不起作用。

var el = document.getElementsByClassName("machine_btn_over_layer");
el.forEach(test);
var test = function() {
  console.log("test");
}

<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>

我做错了什么？我收到错误消息说功能不起作用

【问题讨论】：

在控制台中你应该已经看到你做错了什么："Uncaught TypeError: el.forEach is not a function"你正在使用一个不存在的函数；而是将活动的 NodeList 转换为数组，然后使用 Array.prototype.forEach()。
stackoverflow.com/questions/15843581/… 我认为这篇文章在这种情况下更相关。

标签： javascript

【解决方案1】：

您需要进行两项更改。首先document.getElementsByClassName 是一个HTMLCollection，因此数组方法对此不起作用。因此，要使用数组方法，您可以使用spread operator(...) 将其转换为数组

其次，声明为var test = function() {} 的函数永远不会被提升。所以当el.forEach 被调用时它没有得到函数，因此它会抛出undefined is not a function

var el = [...document.getElementsByClassName("machine_btn_over_layer")];
var test = function() {
  console.log("test");
}
el.forEach(test);

<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>

【讨论】：

赞成使用 (...)。我以前从未见过这种语法！
不适用于所有浏览器，请小心。我更倾向于使用 Array.from() 之类的东西来将它变成一个数组——即使这也不适用于所有浏览器，至少它有 polyfills。

【解决方案2】：

使用文档来帮助您！ document.getElementsByClassName:

var elements = document.getElementsByClassName(names)
elements 是已找到元素的实时HTMLCollection。

您应该在HTMLCollection 文档中注意到的第一件事是它确实没有有一个名为forEach 的方法。但它确实有一个名为length的属性

HTMLCollection.length

返回集合中的项目数。

还有一个名为item的方法

HTMLCollection.item()

将给定从零开始的索引处的特定节点返回到列表中。如果索引超出范围，则返回 null。

所以你应该能够做到这一点：

for (var i = 0; i < el.length; i++) test(el.item(i));

或者使用数组糖：

for (var i = 0; i < el.length; i++) test(el[i]);

【讨论】：

【解决方案3】：

并非每个浏览器都在HTMLCollection 上实现Array.prototype 方法，该方法由getElementsByClassName 方法返回。

变量赋值也不会提升。函数声明。

var el = document.getElementsByClassName("machine_btn_over_layer");

// manually call Array.prototype.forEach on HTMLCollection
Array.prototype.forEach.call(el, test);

// replace function expression with function declaration to hoist with value
function test() {
  console.log("test");
}

<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>

【讨论】：