Add [Symbol.iterator]() methods to HTMLCollection

[tp]

This is related to babel/babel#545 and was previously filed as babel/babel#884

I had this code (working in Firefox without Babel):

for (let contentGroupEl of xmlDocument.getElementsByTagName('contentGroups')) {
...
}

Where xmlDocument is defined as follows:

var xmlDocument = (new DOMParser).parseFromString(content, "application/xhtml+xml");

The above loop iterates over a HTMLCollection.

Babel + Browser Polyfill from babel-core npm package (v4.4.6) generates the following JS, which throws an exception in Chrome:

for (var _iterator = xmlDocument.getElementsByTagName("contentGroups")[Symbol.iterator](), _step; !(_step = _iterator.next()).done; ) {
                var contentGroupEl = _step.value;
}

TypeError: undefined is not a function: since xmlDocument.getElementsByTagName("contentGroups")[Symbol.iterator] equals undefined.

Is is possible to extend HTMLCollection with the iterator methods as well?

My current workaround looks like this:

for (let contentGroupEl of[].slice.call(xmlDocument.getElementsByTagName('contentGroups'))) {
...

Simply extending the HTMLCollection prototype does not seem to work. This code has no effect on the HTMLCollection instances.

if (!HTMLCollection.prototype[Symbol.iterator]) {
  HTMLCollection.prototype[Symbol.iterator] = [][Symbol.iterator]
}

[zloirock]

Show me how to implement it in all browsers :) In stable Chromium I see magic like in your example:

console.log(HTMLCollection.prototype[Symbol.iterator] = [][Symbol.iterator]) // => function ArrayValues() { [native code] }
console.log(HTMLCollection.prototype[Symbol.iterator] == [][Symbol.iterator]) // => true
console.log(Object.getPrototypeOf(document.getElementsByTagName('div')) == HTMLCollection.prototype) // => true
console.log(document.getElementsByTagName('div').hasOwnProperty(Symbol.iterator)) // => false
console.log(Symbol.iterator in document.getElementsByTagName('div')) // => true
console.log(document.getElementsByTagName('div')[Symbol.iterator]) // => undefined

In other browsers it works correct, in nightly it's fixed.

[tp]

Uh, that looks bad :-/

So it's a Chrome stable bug. Hopefully not before long and it will be fixed for all users.

I myself have also not found a way to make it stick in Chrome.

Also I could not find a Chrome bug or code change relating to this.

[zloirock]

I see 2 way how to add it in Chromium, but they are too ugly. Write, if you find a simple way w/o side effect.

[SeanHayes]

I see this is marked as wontfix, but I see a linked commit that looks like it might fix this. Should iterating over HTMLCollections with for of work? It's broken for me in Safari.

[loganfsmyth]

This is fixed in #249 but that has not been published yet. The next version of core-js, when it is released, should include iterable HTMLCollection.

[mrichard]

@loganfsmyth when is next version of core-js expected? Thanks