Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

您需要进行两项更改。第一个document.getElementsByClassName是HTMLCollection，因此数组方法不适用于此。因此，要使用数组方法，您可以使用spread operator(...)

将其转换为数组

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

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>

Answer 2

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

var elements = document.getElementsByClassName(names)
元素是找到元素的实时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]);

Answer 3

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

此外，变量分配也不会提升。函数声明可以。

＆＃13;

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");
}

＆＃13;

<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>

＆＃13;

使用foreach循环遍历类元素

3 个答案: