使用 Array.forEach 迭代 getElementsByClassName 的结果

小编典典

使用 Array.forEach 迭代 getElementsByClassName 的结果

all

我想迭代一些 DOM 元素，我正在这样做：

document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
  //do stuff
});

但我收到一个错误：

document.getElementsByClassName(“myclass”).forEach 不是函数

我正在使用 Firefox 3，所以我知道两者getElementsByClassName都Array.forEach存在。这工作正常：

[2, 5, 9].forEach( function(element, index, array) {
  //do stuff
});

是getElementsByClassName数组的结果吗？如果不是，那是什么？

阅读 135

2022-04-06

共1个答案

小编典典

不，它不是一个数组。正如DOM4 中指定的那样，它是一个HTMLCollection（至少在现代浏览器中。旧版浏览器返回 a
NodeList）。

在所有现代浏览器（几乎所有其他 IE <= 8）中，您都可以调用 Array
的forEach方法，将元素列表（无论是它HTMLCollection还是NodeList）作为this值传递给它：

var els = document.getElementsByClassName("myclass");

Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    console.log(el.tagName);
});

// Or
[].forEach.call(els, function (el) {...});

如果您能够使用 ES6（即您可以放心地忽略 Internet Explorer 或者您正在使用 ES5
转译器），您可以使用Array.from：

Array.from(els).forEach((el) => {
    // Do stuff here
    console.log(el.tagName);
});

2022-04-06