For循环用于HTMLCollection元素

我试图在HTMLCollectionOf中设置所有元素的获取id。我写了下面的代码:

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

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

event1
undefined

这和我预料的不一样为什么第二个控制台输出是未定义的，而第一个控制台输出是event1?

当前回答

截至2016年3月，在Chrome 49.0中，对于…HTMLCollection的作品:

this.headers = this.getElementsByTagName("header");

for (var header of this.headers) {
    console.log(header); 
}

请参阅这里的文档。

但是，只有在使用for…of之前应用以下变通方法，它才会起作用:

HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

for……也有同样的必要。使用NodeList:

NamedNodeMap.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

我相信/希望……的将很快工作，没有上述的变通办法。悬而未决的问题在这里:

https://bugs.chromium.org/p/chromium/issues/detail?id=401699

更新:见下面Expenzor的评论:此问题已于2016年4月修复。不需要添加HTMLCollection.prototype[Symbol. prototype]。iterator] = Array.prototype[Symbol.iterator];使用for…of迭代HTMLCollection

2016-03-03 22:01:53

其他回答

我在IE 11和Firefox 49中使用forEach时遇到了问题

我找到了一个这样的变通办法

Array.prototype.slice.call(document.getElementsByClassName("events")).forEach(function (key) {
        console.log(key.id);
    }

2016-11-08 13:26:23

你可以添加这两行:

HTMLCollection.prototype.forEach = Array.prototype.forEach;
NodeList.prototype.forEach = Array.prototype.forEach;

HTMLCollection由getElementsByClassName和getElementsByTagName返回

NodeList由querySelectorAll返回

像这样你可以做一个forEach:

var selections = document.getElementsByClassName('myClass');

/* alternative :
var selections = document.querySelectorAll('.myClass');
*/

selections.forEach(function(element, i){
//do your stuffs
});

2016-05-13 11:28:56

在ES6中，你可以这样做[…]或者Array.from(collection)，

let someCollection = document.querySelectorAll(someSelector)
[...someCollection].forEach(someFn) 
//or
Array.from(collection).forEach(someFn)

Eg:-

    navDoms = document.getElementsByClassName('nav-container');
    Array.from(navDoms).forEach(function(navDom){
     //implement function operations
    });

2016-05-05 04:21:45

Array.from的替代方法是使用Array.prototype.forEach.call

forEach: Array.prototype.forEach。call(htmlCollection, i => {console.log(i)});

地图:Array.prototype.map。call(htmlCollection, i => {console.log(i)});

2018-06-03 19:02:11