主页 前端技术区 怎么使用用于循环的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迭代将返回这些项目(对象的所有可迭代属性):
0
1
2
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。为什么他们会修正一种收集类型,而不是另一种,这完全是个谜。
引用回复  你好陌生人 ~ 千万别说爱 ~ 让我保持等的姿势继续期待

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理