<p dir="auto">For some reason, the specified behavior in ES6 JavaScript (or "JavaScript 2015") of nodeLists having default iterators that allow you to iterate through them with behavior similar to <code class="notranslate">values()</code>  or a <code class="notranslate">for..of</code> loop isn't defined in Babel yet.</p>
<p dir="auto">In fact, unlike other transpilers that at least explicitly explains its lack of finding the default iterator for things, Babel  currently merely states <code class="notranslate">TypeError: undefined is not a function</code>:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1223224/6212189/46c7a654-b5b0-11e4-988f-c043e4c99b39.png"><img src="https://cloud.githubusercontent.com/assets/1223224/6212189/46c7a654-b5b0-11e4-988f-c043e4c99b39.png" alt="screen shot 2015-02-16 at 7 48 31 am" style="max-width: 100%;"></a></p>
<p dir="auto">I was reading this MDN page on for...of: <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of" rel="nofollow">https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/for...of</a> and they mentioned that you could use it with stuff from the DOM like NodeList.  I tried it and it didn't work so I ended up polyfilling it with this code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="if (NodeList.prototype[Symbol.iterator] === undefined) {
    NodeList.prototype[Symbol.iterator] = function () {
        var i = 0;
        return {
            next: () =&gt; {
                return { done: i &gt;= this.length, value: this.item(i++) };
            }
        }
    };
}"><pre class="notranslate"><code class="notranslate">if (NodeList.prototype[Symbol.iterator] === undefined) {
    NodeList.prototype[Symbol.iterator] = function () {
        var i = 0;
        return {
            next: () =&gt; {
                return { done: i &gt;= this.length, value: this.item(i++) };
            }
        }
    };
}
</code></pre></div>
<p dir="auto">It actually works and lets do stuff like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="for (let { id } of document.querySelectorAll(&quot;div&quot;)) {
    console.log(`elem.id = ${id}`);
}"><pre class="notranslate"><code class="notranslate">for (let { id } of document.querySelectorAll("div")) {
    console.log(`elem.id = ${id}`);
}
</code></pre></div>
<p dir="auto">I'd like to create a pull request for this and the other DOM lists.  Where's a good place to put browser only polyfills?</p>