This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
The forEach() method of the DOMTokenList interface calls the callback given in parameter once for each value pair in the list, in insertion order.
forEach(callback) forEach(callback, thisArg)
callbackThe function to execute for each element, eventually taking three arguments:
currentValueThe current element being processed in the array.
currentIndexThe index of the current element being processed in the array.
listObjThe array that forEach() is being applied to.
thisArg OptionalThe value to use as this when executing callback.
None.
In the following example we retrieve the list of classes set on a <pre> element as a DOMTokenList using Element.classList. We when retrieve an iterator containing the values using forEach(), writing each one to the <pre>'s Node.textContent inside the forEach() inner function.
<pre class="a b c"></pre>
const pre = document.querySelector("pre");
const classes = pre.classList;
const iterator = classes.values();
classes.forEach(function (value, key, listObj) {
pre.textContent += `(${value} ${key})/${this}\n`;
}, "arg");
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
forEach |
42 | 16 | 50 | 29 | 10.1 | 42 | 50 | 29 | 10.3 | 4.0 | 42 | 10.3 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/forEach