for of loop querySelectorAll

Question

Mozilla states that \"for of loops will loop over NodeList objects correctly\". (source: https://developer.mozilla.org/en-US/docs/Web/API/NodeList) However, this doesn\'t wo

Answer 1

You can use Array.from

let _list = document.querySelectorAll('input[type=checkbox]');

let list = Array.from(_list);

for (let item of list) {
  //... just like an array
  item.checked = true
}

or more shortly

let list = document.querySelectorAll('input[type=checkbox]');

for (let item of Array.from(list)) {
  item.checked = true
}

Important note Array.from was introduced in Chrome 45 source.

Answer 2

The docs are correct, but I wouldn't call this a bug. Rather it's a "not yet implemented feature".

There is no standard for this, and there is still active discussion on how the DOM should integrate with ES6. Notice that it is clear that querySelectorAll should return something iterable which can be used in a for of loop (as the common expectation demands), but it's not clear how that should happen (Let NodeList implement the Iterable interface? Let some Elements collection subclass Array?).

Answer 3

Edit: This is shipping in Chrome 51.

Jake Archibald posted a simple fix:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]

And for of loops.