Are HTMLCollection and NodeList iterables?
In ES6, an iterable is an object that allows for... of , and has a Symbol.iterator key.
Arrays are iterables, as are Sets and Maps. The question is: are HTMLCollection and NodeList iterables? Are they supposed to be?
MDN documentation seems to suggest a NodeList is an iterable.
for...of loops will loop over NodeList objects correctly, in browsers that support for...of (like Firefox 13 and later)
This appears to corroborate Firefox's behaviour.
I tested the following code in both Chrome and Firefox, and was surprised to find that Firefox seem to think they are iterables, but Chrome does not. In addition, Firefox thinks that the iterators returned by HTMLCollection and NodeList are one and the same.
var col = document.getElementsByClassName('test'); // Should get HTMLCollection of 2 elems
var nod = document.querySelectorAll('.test'); // Should get NodeList of 2 elems
var arr = [].slice.call(col); // Should get Array of 2 elems
console.log(col[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined
console.log(nod[Symbol.iterator]); // Firefox: iterator function, Chrome: undefined
console.log(arr[Symbol.iterator]); // Firefox & Chrome: iterator function
console.log(col[Symbol.iterator] === nod[Symbol.iterator]); // Firefox: true
console.log(col[Symbol.iterator] === arr[Symbol.iterator]); // Firefox: false<div class="test">1</div>
<div class="test">2</div>对NodeList ， HTMLCollection ， DOMTokenList和DOMSettableTokenList Symbol.iterator支持HTMLCollection DOMTokenList讨论并添加到WHATWG的DOM规范中。
Unfortunately, not yet. But until they are, you can easily polyfill them like so:
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
As greiner pointed out, native Symbol.iterator support for NodeList was added to the WHATWG's DOM spec in 2014.
Unfortunately, Chrome 51 is the first version of Chrome to support it, and its Beta has only just been released at the time of writing this answer. Also, there's no support in any version of Internet Explorer or Edge.
To add Symbol.iterator support for NodeList in all browsers to your code, just use the following polyfill :
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];