javascript - 使用 Array.forEach 迭代 getElementsByClassName 的结果

Question

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

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

但我得到一个错误:

document.getElementsByClassName("myclass").forEach is not a function

我使用的是 Firefox 3，所以我知道 getElementsByClassName 和 Array.forEach 都存在。这工作正常:

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

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

Answer 1

不，它不是一个数组。如specified in DOM4 , 这是一个 HTMLCollection (至少在现代浏览器中。旧版浏览器返回 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);
});