It's a live collection that gets updated when the DOM changes. and something that should be avoided in general. Now, the former does have forEach defined - but it's pretty much the only array method that has been added to its prototype so far.īut it's only a relatively recent addition, so older browsers don't support it - fortunately, the Array#forEach trick works pretty well, down to sufficiently old Internet Explorer versions (probably 6? 5.5? The heck am I saying, that could work for slice, but forEach was added only in IE9.).Ī HTMLCollection is a totally different beast. document.querySelectorAll('.myclass').A small correction: you used document.getElementsB圜lassName which does not return a NodeList but a HTMLCollection. That means that, if you want to use forEach, you can use a DOM method which returns a NodeList, like querySelectorAll. Iterable will have “entries”, “forEach”, “keys”, “values” properties on its interface prototype object. Note: In the ECMAScript language binding, an interface that is Support being iterated over to obtain a sequence of values. Objects implementing an interface that is declared to be iterable

The difference is important, because DOM4 now defines NodeLists as iterable. Previously, some browsers returned a NodeList instead.

Getter Element? namedItem(DOMString name) Getter Element? item(unsigned long index)

map(element => element.innerHTML) Īs already said, getElementsB圜lassName returns a HTMLCollection, which is defined as While the alternative function querySelectorAll (which kinda makes getElementsB圜lassName obsolete) returns a collection which does have forEach natively, other methods like map or filter are missing, so this syntax is still useful. works on all array-like objects, not only arrays themselves, then good old array syntax is used to construct an array from the values. In older browsers which don't support om, you need to use something like Babel.ĮS6 also adds this syntax. You can use om to convert collection to array, which is way cleaner than : om(document.getElementsB圜lassName('myclass')).forEach(

Javascript for each element