IE supports forEach(…) when invoked fromthe console but not when called from the code

Question

I\'m running this snippet the console. In IE it produces the output just as expected. Running the same in Cr and FF for reference confirms the congruence of behavior.

<

Answer 1

Little late, but it might be useful if someone has the same problem and doesn't want/can't replace all forEach methods with [].forEach.call(elements, fn(el)). Here is polyfill that works for ie11

if (! Object.getOwnPropertyDescriptor(NodeList.prototype, 'forEach')) {
    Object.defineProperty(NodeList.prototype, 'forEach', Object.getOwnPropertyDescriptor(Array.prototype, 'forEach'));
}

Answer 2

It is not a problem of the browser, it is more like you get an array like object, with querySelectorAll. It returns a NodeList, which is iterable, but not directly with array methods.

But you can borrow the method from Array.prototype, like this one

Array.prototype.forEach.call(menu, function(element) { /* ... */ });

If you like to get first a real array, you could convert it with

array = Array.apply(null, menu);

Answer 3

Basically document.querySelectorAll would return a nodeList an array like object not an array. You have to convert it to an array before invoking array functions over that.

var menus = document.querySelectorAll("ul.application>li>a");
menus = [].slice.call(menus);
menus.forEach(function(element) { ... });

If your environment supports ES6 then you can use Array.from()

var menus = document.querySelectorAll("ul.application>li>a");
menus = Array.from(menus);
menus.forEach(function(element) { ... });