Why Doesn't `document.getElementsByClassName().forEach` Work, and How Can I Fix It?

Using Array.forEach with getElementsByClassName

When attempting to iterate over DOM elements using document.getElementsByClassName( "myclass" ).forEach, one may encounter the error "document.getElementsByClassName("myclass").forEach is not a function." This occurs because the result of getElementsByClassName is not an array but an HTMLCollection.

To resolve this issue, one must convert the HTMLCollection into an array before using forEach. This can be done using the Array.prototype.forEach.call method with the HTMLCollection as the this value:

var els = document.getElementsByClassName("myclass");
Array.prototype.forEach.call(els, function(el) {
    // Do stuff here
    console.log(el.tagName);
});

Alternatively, one can use [].forEach.call:

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

In ES6, the Array.from function can be used:

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

The above is the detailed content of Why Doesn't `document.getElementsByClassName().forEach` Work, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!