Edge 15 throws error when using 'for ... of' on a NodeList

Question

When looking at the ECMAScript compatibility table, it says that Edge 15 and Edge 16 support for ... of loops.

However, when I run this code:

const list = document.querySelectorAll('[data-test]');
console.log(list);

for (const item of list) {
  console.log(item);
}

<div data-test></div>
<div data-test></div>
<div data-test></div>
<div data-test></div>
<div data-test></div>

It works in Chrome and Firefox, but not in Edge. Instead it says:

Object doesn't support property or method 'Symbol.iterator'.

As I understand it, NodeList actually should support it, right?

Here's a fildde to try it yourself: Test it online

Can somebody explain the problem or the mistake here?

Edge does support `for... of`. It would seem that it doesn't support iterators on `NodeList`s. — JLRishe, Nov 14 '17 at 13:47
Have you considered loading a polyfill? This kind of thing is what they are best at. — loganfsmyth, Nov 14 '17 at 17:19
@loganfsmyth Good point. I'm also considering the suggested solution which is like a polyfill but for this specific problem only. — lampshade, Nov 14 '17 at 22:18

score 7 · Accepted Answer · answered Nov 14 '17 at 13:52

Edge does support for... of.

It would seem that it doesn't support iterators on NodeLists. Not all array-like objects support iterators and I'm not sure whether there is any standard saying that NodeLists have to.

In any case, it's easy enough to get for ... of to work with them:

const list = document.querySelectorAll('[data-test]');

for (const item of Array.from(list)) {
 console.log(item);
}

<div data-test>a</div>
<div data-test>b</div>
<div data-test>c</div>
<div data-test>d</div>
<div data-test>e</div>

Thanks for the explanation. So I must use `Array.from`, thought I could avoid that overhead. Thanks for your help by locating the problem. +1. — lampshade, Nov 14 '17 at 13:55

Touffy · Answer 2 · 2017-11-14T15:53:37.997

If for..of is supported but Edge 15 forgot to add the behavior to NodeList, you could polyfill it yourself with very little code:

NodeList.prototype[Symbol.iterator] = function* () {
    for(var i = 0; i < this.length ; i++) {
        yield this[i]
    }
}

To answer the other question (is it defined as iterable in the spec?) the answer is yes:

The DOM spec defines NodeList as:

interface NodeList {
  getter Node? item(unsigned long index);
  readonly attribute unsigned long length;
  iterable<Node>;
};

Note the third property, iterable<Node>;. Looking it up in the WebIDL spec:

In the ECMAScript language binding, an interface that is iterable will have “entries”, “forEach”, “keys”, “values” and @@iterator properties on its interface prototype object.

It seems that Edge doesn't implement any of that.

It appears that `Edge` does not implement `NodeList#values`. — JLRishe, Nov 14 '17 at 15:12
Ah well, thanks for checking. At least then it is consistent with the DOM level 3. I will edit my answer. — Touffy, Nov 14 '17 at 15:51

Edge 15 throws error when using 'for ... of' on a NodeList

2 Answers2

Linked