首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >HTMLCollection和NodeList是可迭代的吗?

HTMLCollection和NodeList是可迭代的吗?
EN

Stack Overflow用户
提问于 2015-07-08 12:09:42
回答 4查看 3.6K关注 0票数 22

在ES6中,iterable是允许for... of的对象,并且具有Symbol.iterator密钥。

数组是可迭代的,集合和映射也是如此。问题是:HTMLCollectionNodeList是可迭代的吗?他们应该是这样的吗?

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

在支持NodeList的浏览器(如Firefox13和更高版本)中,

for...of循环将正确地遍历NodeList对象。

这似乎证实了火狐的行为。

我在Chrome和Firefox中测试了以下代码,很惊讶地发现Firefox似乎认为它们是可迭代的,但Chrome并非如此。此外,火狐认为HTMLCollectionNodeList返回的迭代器是同一个迭代器。

代码语言:javascript
复制
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
代码语言:javascript
复制
<div class="test">1</div>
<div class="test">2</div>

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

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-07-23 06:11:29

Symbol.iteratorNodeListHTMLCollectionDOMTokenListDOMSettableTokenList的支持是去年的discussedadded to WHATWG's DOM spec

票数 6
EN

Stack Overflow用户

发布于 2015-08-14 05:57:16

不幸的是,现在还没有。但在它们出现之前,您可以像这样轻松地对它们进行多填充:

代码语言:javascript
复制
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
票数 5
EN

Stack Overflow用户

发布于 2016-04-30 06:35:26

正如指出的那样,2014年WHATWG的DOM规范中添加了对NodeList的原生Symbol.iterator支持。

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

要在您的代码中添加对所有浏览器中的NodeListSymbol.iterator支持,只需使用以下polyfill:

代码语言:javascript
复制
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31283360

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档