Caniuse: NodeList/HTMLCollection

[culshaw]

Support for NodeList types https://developer.mozilla.org/en/docs/Web/API/NodeList

also very similar (probably the same thing)

https://developer.mozilla.org/en/docs/Web/API/HTMLCollection

[davidflanagan]

Now that NodeList.forEach() works in Chrome and Firefox, I'd love to see it on caniuse.com somewhere. MDN has a compatiblity table here: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

But I'd prefer to be able to find more definitive information at caniuse.com

[thw0rted]

Agreed, I just discovered that NodeList is getting iterator-like methods added but it's still very young -- as of today MDN doesn't have any data at all for MS Edge, for example -- and I tend to rely on caniuse.com as canonical.

[Schweinepriester]

+1

https://css-tricks.com/now-ever-might-not-need-jquery/#article-header-id-14

[thw0rted]

FWIW I now use [...document.querySelectorAll(".foo")].forEach and let Babel / polyfill sort it out. I find it more readable and less verbose than most of the alternatives involving Array.prototype.

[NiavlysB]

@thw0rted I've heard this method is about twice as slow as necessary, and performance aside, I think it's easier and more consistant to use a polyfill:

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 one is suggested by Mozilla here: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill

[Munodi]

+1
Came across this the other day, definately needs more exposure.

[thw0rted]

Since writing my above comment I've switched to using the built-in forEach (and Array.from if I really need an actual array) instead. I don't know about performance.

[Fyrd]

Now available at https://caniuse.com/#feat=mdn-api_nodelist_foreach etc