用于HTMLCollection元素的循环 [英] For loop for HTMLCollection elements
问题描述
我正在设置HTMLCollection中所有元素的get id。我写了以下代码：
var list = document.getElementsByClassName（events）;
console.log（list [0] .id）; // first console output
for（key in list）{
console.log（key.id）; //第二个控制台输出
}
但是我在控制台中输入了以下输出： p>
event1
undefined
这不是我预期的。为什么第二个控制台输出 未定义但$ 第一个控制台输出是 event1 ？
Eeek。您不能在 nodeList 或 HTMLCollection 中 $ c>当你重复执行时，你需要从列表中实际获取值，使用迭代中的索引。
你应该像下面这样迭代： / p>
var list = document.getElementsByClassName（events）;
for（var i = 0; i< list.length; i ++）{
console.log（list [i] .id）; //第二个控制台输出
}
for / in 用于迭代对象的属性。它不是用于迭代一个HTMLCollection的数组或类似数组的对象。我只是在Chrome中尝试过，并以迭代方式迭代它将检索列表中的项目（索引0，1，2，等等），但也将检索长度和项目属性。 c $ c> 中的根本不适用于HTMLCollection。
请参阅 http://jsfiddle.net/jfriend00/FzZ2H/ 为什么你不能在 iteration将返回这些项目（对象的所有可迭代属性）：
0
1
2
项目
namedItem
@@ iterator
长度
希望现在，您可以看到为什么要为（var i = 0; i< list.length; i ++）使用在你的迭代中只需得到 0 ， 1 和 2
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用于/ code> 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）;
}
这适用于当前版本的Chrome，Firefox和Edge。 >
工作演示： http://jsfiddle.net/jfriend00/joy06u4e / 。
2016年12月ES6的第二次更新
截至2016年12月，Chrome v54和Firefox v50内置了 Symbol.iterator 支持，因此下面的代码由本身。它尚未被内置到Edge中。
var list = document.getElementsByClassName（events）;
for（var item of list）{
log（item.id）;
}
工作演示（在Chrome和Firefox中）： http://jsfiddle.net/jfriend00/mo8sus29/
I'm trying to set get id of all elements in an HTMLCollection. I wrote the following code:
var list= document.getElementsByClassName("events");
console.log(list[0].id); //first console output
for (key in list){
console.log(key.id); //second console output
}
But I got the follwoing output in console:
event1
undefined
which is not what I expected. Why is the second console output undefined but the first console output is event1?
Eeek. You can't iterate over a nodeList or HTMLCollection with for/in and when you do iterate, you need to actually retrieve the value from the list, using the index in your iteration.
You should iterate it like this:
var list= document.getElementsByClassName("events");
for (var i = 0; i < list.length; i++) {
console.log(list[i].id); //second console output
}
for/in is meant for iterating the properties of an object. It is not meant for iterating an array or an array-like object which an HTMLCollection is. I just tried this in Chrome and iterating it the way you were iterating it will retrieve the items in the list (indexes 0, 1, 2, etc...), but also will retrieve the length and item properties. The for/in iteration simply won't work for an HTMLCollection.
See http://jsfiddle.net/jfriend00/FzZ2H/ for why you can't iterate an HTMLCollection with for/in.
In Firefox, your for/in iteration would return these items (all the iterable properties of the object):
0
1
2
item
namedItem
@@iterator
length
Hopefully, now you can see why you want to use for (var i = 0; i < list.length; i++) instead so you just get 0, 1 and 2 in your iteration.
Update for ES6 in 2015
Added to ES6 is Array.from() that will convert an array-like structure to an actual array. That allows one to enumerate a list directly like this:
"use strict";
Array.from(document.getElementsByClassName("events")).forEach(function(item) {
console.log(item.id);
});
Working demo (in Firefox, Chrome and Edge as of April 2016): https://jsfiddle.net/jfriend00/8ar4xn2s/
Update for ES6 in 2016
You can now use the ES6 for/of construct with a NodeList and an HTMLCollection by just adding this to your code:
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
Then, you can do:
var list = document.getElementsByClassName("events");
for (var item of list) {
log(item.id);
}
This works in the current version of Chrome, Firefox and Edge.
Working demo: http://jsfiddle.net/jfriend00/joy06u4e/.
Second Update for ES6 in Dec 2016
As of Dec 2016, Symbol.iterator support has been built-in to Chrome v54 and Firefox v50 so the code below works by itself. It is not yet built-in for Edge.
var list = document.getElementsByClassName("events");
for (var item of list) {
log(item.id);
}
Working demo (in Chrome and Firefox): http://jsfiddle.net/jfriend00/mo8sus29/
这篇关于用于HTMLCollection元素的循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
