How can I make .querySelectorAll() or .forEach() work in Firefox?
document.querySelectorAll
returns a NodeList which is indexed like an array, but not an Array so you can't call the array methods on it.
You can use Array.from(nodeList)
in ES6 or Array.prototype.slice.call(nodeList)
for ES5
Array.from(document.querySelectorAll('selector')).forEach(el => el)
I've just tested document.querySelectorAll('.element')
with .forEach
in Firefox 71, and it worked.
CanIUse shows that it's been supported in FF, since version 50 (late 2016): https://caniuse.com/#search=forEach
Older versions of FF have a 0.25% marketshare, so .forEach
should be safe to use.
You can also use a polyfill (see https://developer.mozilla.org/de/docs/Web/API/NodeList/forEach):
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = function (callback, thisArg) {
thisArg = thisArg || window;
for (var i = 0; i < this.length; i++) {
callback.call(thisArg, this[i], i, this);
}
};
}
This adds the forEach method to the NodeList, if it is missing.