怎么使用用于循环的HTMLCollection元素？--PHP社区--YouYaX原创论坛

收藏此帖显示10条显示15条显示20条无滚动条有滚动条新浪微博

主页前端技术区怎么使用用于循环的HTMLCollection元素？

狄默默斯基

发表于2021-04-30 10:25:50 只看楼主

楼主

头衔: 精益求精
注册时间: 2014-02-09
用户组: 日常管理组
发帖数: 578
金币数: 310
短消息

不应该遍历一个nodeList或HTMLCollection用for/in，做迭代，实际上需要从列表中检索值，在反复使用索引。

应该像这样迭代它：

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

for/in用于迭代对象的属性。这并不意味着迭代HTMLCollection所在的数组或类似数组的对象。我只是在Chrome中尝试了这一点，并按迭代的方式迭代它，它将检索列表中的项目（索引0,1,2等），但也会检索length和item属性。该for/in迭代根本不会对的HTMLCollection工作。

在Firefox中，for/in迭代将返回这些项目（对象的所有可迭代属性）：

item

namedItem

@@iterator

length

可以看到为什么想要使用，for (var i = 0; i < list.length; i++)所以只是得到0，1并2在迭代中。

添加到ES6是Array.from()将一个类似数组的结构转换为一个实际的数组。这使得人们可以像这样直接枚举列表：

"use strict";

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

2006年可以使用ES6 for / of构建一个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) {

log(item.id);

}

截至2016年12月，Symbol.iterator已支持Chrome v54和Firefox v50，因此下面的代码可以独立运行。它尚未内置于Edge。

var list = document.getElementsByClassName("events");

for (var item of list) {

log(item.id);

}

截至2017年12月，此功能在边缘41.16299.15.0中适用于nodeListas document.querySelectorAll()，但不适用于此HTMLCollection，document.getElementsByClassName()因此必须手动指定迭代器才能在Edge中使用它HTMLCollection。为什么他们会修正一种收集类型，而不是另一种，这完全是个谜。

引用回复

你好陌生人 ~ 千万别说爱 ~ 让我保持等的姿势继续期待

操作点评

回复人
回复内容

操作管理