JS：使用Array.forEach遍历getElementsByClassName的结果

Question

我想遍历一些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数组的结果吗？如果没有，那是什么？

Answer 1

不需要。如DOM4中所指定，它是一个HTMLCollection（至少在现代浏览器中。较旧的浏览器返回NodeList）。

在所有现代浏览器（几乎所有其他IE<=8）中，您都可以调用Array的forEach方法，并将其元素列表（为HTMLCollectionorNodeList）作为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感到满意（例如，您可以放心地忽略InternetExplorer或使用ES5编译器），则可以使用Array.from：

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