javascript - HTMLCollection 元素的 For 循环

Question

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

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

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

event1
undefined

这不是我所期望的。为什么第二个控制台输出 undefined但第一个控制台输出是 event1 ?

Answer 1

在回答原始问题时，您正在使用 for/in不正确。在您的代码中，key是索引。因此，要从伪数组中获取值，您必须执行 list[key]并获得 id，你会做 list[key].id .但是，你不应该用 for/in 来做这件事。首先。

摘要(2018 年 12 月新增)

永远不要使用 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 object 都可以有其他属性，这些属性将通过 for/in 返回。迭代。我刚刚在 Chrome 中尝试了这个，并按照你迭代的方式迭代它会检索列表中的项目(索引 0、1、2 等...)，但也会检索 length和 item特性。 for/in迭代根本不适用于 HTMLCollection。

见 http://jsfiddle.net/jfriend00/FzZ2H/为什么你不能用 for/in 迭代 HTMLCollection .

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

0
1
2
item
namedItem
@@iterator
length

希望现在您能明白为什么要使用 for (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 更新

您现在可以使用带有 NodeList 的 ES6 for/of 构造。和一个 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 原型(prototype)，以便当 for/of 迭代它们时，它使用 Array 迭代器来迭代它们。

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

2016 年 12 月 ES6 的第二次更新

截至 2016 年 12 月， Symbol.iterator Chrome v54 和 Firefox v50 已内置支持，因此下面的代码可以自行运行。它尚未内置于 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() ，但不是 HTMLCollection如 document.getElementsByClassName()所以你必须手动分配迭代器才能在 Edge 中为 HTMLCollection 使用它.为什么他们会修复一种集合类型，而不是另一种，这完全是个谜。但是，您至少可以使用 document.querySelectorAll() 的结果使用 ES6 for/of现在 Edge 的当前版本中的语法。

我还更新了上面的 jsFiddle，因此它同时测试了 HTMLCollection和 nodeList单独捕获 jsFiddle 本身的输出。

2018 年 3 月 ES6 的第四次更新

每个 mesqueeeb， Symbol.iterator Safari 也内置了支持，因此您可以使用 for (let item of list)对于 document.getElementsByClassName()或 document.querySelectorAll() .

2018 年 4 月 ES6 第五次更新

显然，支持迭代 HTMLCollection与 for/of将于 2018 年秋季登陆 Edge 18。

2018 年 11 月 ES6 第六次更新

我可以确认，使用 Microsoft Edge v18(包含在 2018 年秋季 Windows 更新中)，您现在可以在 Edge 中使用 for/of 迭代 HTMLCollection 和 NodeList。

因此，现在所有现代浏览器都包含对 for/of 的原生支持。 HTMLCollection 和 NodeList 对象的迭代。