HTMLCollection元素的For循环

在回答原始问题时，您使用

for/in

不正确。在您的代码中，

key

是索引。因此，要从伪数组中获取值，就必须这样做，

list[key]

而要获取id，就必须这样做

list[key].id

。但是，首先不应该这样做

for/in

。

摘要

永远不要使用

for/in

来迭代nodeList或HTMLCollection。避免它的原因在下面描述。

所有最新版本的现代浏览器（Safari，Firefox，Chrome，Edge）都支持

for/of

DOM列表（例如

nodeList

或）上的迭代

HTMLCollection

。

这是一个例子：

var list = document.getElementsByClassName("events");for (let item of list) {    console.log(item.id);}

要包括旧版浏览器（包括IE之类的东西），它将在任何地方都可以使用：

var list= document.getElementsByClassName("events");for (var i = 0; i < list.length; i++) {    console.log(list[i].id); //second console output}

---

为什么不应该使用的说明

for/in

for/in

用于迭代对象的属性。这意味着它将返回对象的所有可迭代属性。尽管它似乎可以用于数组（返回数组元素或伪数组元素），但它还可以返回对象的其他属性，这些属性不是您希望从类似数组的元素中获得的。而且，猜测什么，一个

HTMLCollection

或一个

nodeList

对象都可以具有其他属性，这些属性将通过

for/in

迭代返回。我只是在Chrome中尝试了此操作，然后以您迭代的方式对其进行了迭代，它将检索列表中的项目（索引0、1、2等…），但还将检索

length

和

item

属性。该

for/in

迭代根本不会对的HTMLCollection工作。

---

在Firefox中，您的

for/in

迭代将返回以下项目（对象的所有可迭代属性）：

012itemnamedItem@@iteratorlength

我们希望，现在你可以看到为什么要使用

for(vari=0;i<list.length;i++)

代替你只是得到

0

，

1

并

2

在你的迭代。

---

以下是浏览器在2015-2018年期间的演变方式的演变，为您提供了其他迭代方式。由于您可以使用上述选项，因此在现代浏览器中现在不需要这些了。

2015年ES6更新

ES6中增加了

Array.from()

将类似数组的结构转换为实际数组的功能。这样就可以像这样直接枚举列表：

"use strict";Array.from(document.getElementsByClassName("events")).forEach(function(item) {   console.log(item.id);});

---

2016年ES6更新

您现在可以使用ES6与构建物/

NodeList

和

HTMLCollection

只需添加这对您的代码：

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

然后，您可以执行以下操作：

var list = document.getElementsByClassName("events");for (var item of list) {    console.log(item.id);}

在当前版本的Chrome，Firefox和Edge中有效。之所以可行，是因为它将Array迭代器同时附加到NodeList和HTMLCollection原型，以便当进行for/ of迭代时，它使用Array迭代器对其进行迭代。

---

ES6的第二次更新于2016年12月

截至2016年12月，

Symbol.iterator

Chromev54和Firefoxv50已内置支持，因此以下代码可独立运行。Edge尚未内置。

var list = document.getElementsByClassName("events");for (let item of list) {    console.log(item.id);}

ES6的第三次更新（2017年12月）

截至2017年12月，此功能在Edge41.16299.15.0中适用

nodeList

于in

document.querySelectorAll()

而不是

HTMLCollection

inin，

document.getElementsByClassName()

因此您必须手动分配迭代器才能在Edge中将其用于

HTMLCollection

。为什么要修复一种收集类型而不是另一种收集类型，这完全是个谜。但是，现在至少可以在当前版本的Edge中使用

document.querySelectorAll()

带有ES6

for/of

语法的结果。

我还更新了上述的jsfiddle所以它同时测试

HTMLCollection

和

nodeList

分开，并捕获的的jsfiddle本身的输出。

ES6的第四次更新于2018年3月

每mesqueeeb，

Symbol.iterator

支持已经内置Safari浏览器，所以你可以使用

for(letitemoflist)

的两种

document.getElementsByClassName()

或

document.querySelectorAll()

。

ES6的第五次更新于2018年4月

显然，对

HTMLCollection

with 进行迭代的支持

for/of

将在2018年秋季提供给Edge 18。

ES6的第六次更新于2018年11月

我可以确认使用Microsoft Edge v18（包含在2018年秋季的Windows Update中）现在可以在Edge中使用for /
of迭代HTMLCollection和NodeList。

因此，现在所有现代浏览器都包含

for/of

对HTMLCollection和NodeList对象的迭代的本机支持。