javascript – 用于HTMLCollection元素的循环

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 用于HTMLCollection元素的循环，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3822字，纯文字阅读大概需要6分钟。

内容图文

我正在尝试在HTMLCollectionOf中设置所有元素的get id.我写了以下代码：

var list = document.getElementsByClassName("events");
console.log(list[0].id);
for (key in list) {
    console.log(key.id);
}

但我在控制台中得到以下输出：

event1
undefined

这不是我的预期.为什么第二个控制台输出未定义但第一个控制台输出是event1？

解决方法:

摘要(2018年12月添加)

不要使用for / in来迭代nodeList或HTMLCollection.避免它的原因如下所述.

所有最新版本的现代浏览器(Safari,Firefox,Chrome,Edge)都支持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等等),但也会检索长度和项目属性. for / in迭代根本不适用于HTMLCollection.

有关为何无法使用for / in迭代HTMLCollection的原因,请参阅http://jsfiddle.net/jfriend00/FzZ2H/.

在Firefox中,您的for / in迭代将返回这些项(对象的所有可迭代属性)：

0
1
2
item
namedItem
@@iterator
length

希望现在你可以看到你想要使用的原因(var i = 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年4月在Firefox,Chrome和Edge中)：https://jsfiddle.net/jfriend00/8ar4xn2s/

2016年ES6更新

您现在可以将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) {
    console.log(item.id);
}

这适用于当前版本的Chrome,Firefox和Edge.这是因为它将Array迭代器附加到NodeList和HTMLCollection原型,因此当for / of迭代它们时,它使用Array迭代器来迭代它们.

工作演示：http://jsfiddle.net/jfriend00/joy06u4e/.

2016年12月ES6的第二次更新

截至2016年12月,Chrome v54和Firefox v50内置了Symbol.iterator支持,因此下面的代码可以单独使用. Edge尚未内置.

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

工作演示(在Chrome和Firefox中)：http://jsfiddle.net/jfriend00/3ddpz8sp/

2017年12月ES6的第三次更新

截至2017年12月,此功能在Edge 41.16299.15.0中用于nodeList,如document.querySelectorAll(),但不是在document.getElementsByClassName()中的HTMLCollection,因此您必须手动分配迭代器以在Edge中使用它一个HTMLCollection.他们为什么要修复一种集合类型而不是另一种集合类型,这完全是个谜.但是,您现在至少可以在当前版本的Edge中使用document.querySelectorAll()和ES6的结果.

我还更新了上面的jsFiddle,因此它分别测试HTMLCollection和nodeList,并捕获jsFiddle本身的输出.

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

对于mesqueeeb,Symbol.iterator支持也已内置到Safari中,因此您可以使用for(list of item)来记录document.getElementsByClassName()或document.querySelectorAll().

2018年4月ES6的第五次更新

显然,支持使用for / of迭代HTMLCollection将在2018年秋季进入Edge 18.

2018年11月ES6第六次更新

我可以通过Microsoft Edge v18(包含在2018年秋季Windows Update中)确认,现在您可以使用Edge中的for / of迭代HTMLCollection和NodeList.

因此,现在所有现代浏览器都包含对HTMLCollection和NodeList对象的迭代的本机支持.

内容总结

以上是互联网集市为您收集整理的javascript – 用于HTMLCollection元素的循环全部内容，希望文章能够帮你解决javascript – 用于HTMLCollection元素的循环所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端