HTMLCollection和NodeList是否可迭代?

在ES6中,iterable是一个允许for... of的对象,并且有一个Symbol.iterator键。

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

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

for...of循环将正确地在NodeList对象上循环,在支持for...of浏览器for...of (如Firefox 13和更高版本)

这似乎证实了Firefox的行为。

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

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>

NodeListHTMLCollectionDOMTokenListDOMSettableTokenList Symbol.iterator支持HTMLCollection DOMTokenList讨论并添加到WHATWG的DOM规范中。


不幸的是,还没有。 但是,直到他们,你可以很容易地像他们那样填充它们:

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

正如greiner指出的, Symbol.iteratorNodeList本地Symbol.iterator支持已被添加到WHATWG的DOM规范中。

不幸的是,Chrome 51是第一个支持它的Chrome版本,它的Beta版本刚刚在撰写此答案时发布。 另外,在任何版本的Internet Explorer或Edge中都不支持。

要将所有浏览器中的NodeList Symbol.iterator支持添加到您的代码中,只需使用以下polyfill:

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
链接地址: http://www.djcxy.com/p/74151.html

上一篇: Are HTMLCollection and NodeList iterables?

下一篇: javascript cross browser scripting help