javascript – HTMLCollection和NodeList是否可以迭代?

在ES6中,iterable是允许…的对象,并具有Symbol.iterator键。

数组是迭代,集合和地图也是。问题是:是HTMLCollectionNodeList迭代?他们应该是

MDN文档似乎表明NodeList是一个可迭代的。

for...of loops will loop over NodeList objects correctly, in browsers that support for...of (like Firefox 13 and later)

这似乎证实了Firefox的行为。

我在Chrome和Firefox中测试了以下代码,并惊讶地发现,Firefox似乎认为它们是可迭代的,但Chrome并没有。另外,Firefox认为HTMLCollection和NodeList返回的迭代器是一样的。

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>

一个非常奇怪的,令人困惑的事情:运行代码段会产生一个不同的结果,复制它并在Firefox的实际文件/控制台中运行(特别是最后一个比较)。对这个奇怪的行为的任何启发也将不胜感激。

NodeList,HTMLCollection,DOMTokenList和DOMSettableTokenList的Symbol.iterator支持是discussedaddedWHATWG’s DOM spec去年。
http://stackoverflow.com/questions/31283360/are-htmlcollection-and-nodelist-iterables

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – HTMLCollection和NodeList是否可以迭代?