How to Correctly Iterate Over `getElementsByClassName()` Results in JavaScript?

Error: getElementsByClassName() Result Iteration with Array.forEach

When attempting to iterate over DOM elements using getElementsByClassName() and the Array.forEach method, users may encounter an error due to the fact that getElementsByClassName() does not return an array.

The result of getElementsByClassName() is an HTMLCollection, which, in modern browsers, differs from an array. To resolve this issue, convert the HTMLCollection to an array before using forEach. This can be achieved through the following methods:

• Using call() with Array.prototype.forEach:

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

• Using `[].forEach.call():

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

• Using `Array.from() (ES6)**:

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

The above is the detailed content of How to Correctly Iterate Over `getElementsByClassName()` Results in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!