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.