我试图在HTMLCollectionOf中设置所有元素的获取id。我写了下面的代码:
var list = document.getElementsByClassName("events");
console.log(list[0].id);
for (key in list) {
console.log(key.id);
}
但我在控制台得到以下输出:
event1
undefined
这和我预料的不一样为什么第二个控制台输出是未定义的，而第一个控制台输出是event1?
当前回答
你可以添加这两行:
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
});
其他回答
如果你使用的是IE9或更高版本，就没有理由使用es6特性来转义循环。
在ES5中，有两个不错的选项。首先，你可以“借用”Array的forEach。
但更好的是……
使用Object.keys()，它有forEach和过滤器来自动“拥有属性”。
这就是对象。Keys本质上等同于for…在HasOwnProperty，但更流畅。
var eventNodes = document.getElementsByClassName("events");
Object.keys(eventNodes).forEach(function (key) {
console.log(eventNodes[key].id);
});
你不能在nodelist或HTMLCollections上使用for/in。但是，您可以使用一些数组。原型方法，只要你.call()他们，并传递在NodeList或HTMLCollection像这样。
因此，可以考虑以下代码作为jfriend00 for循环的替代:
var list= document.getElementsByClassName("events");
[].forEach.call(list, function(el) {
console.log(el.id);
});
MDN上有一篇很好的文章介绍了这种技术。注意他们关于浏览器兼容性的警告:
[…传递一个宿主对象(像一个NodeList)作为 对于本地方法(如forEach)，这并不保证能工作 所有的浏览器和已知的失败在一些。
因此，虽然这种方法很方便，但for循环可能是最兼容浏览器的解决方案。
更新(2014年8月30日):最终你将能够使用ES6 /of!
var list = document.getElementsByClassName("events");
for (const el of list)
console.log(el.id);
最近版本的Chrome和Firefox已经支持它了。
你可以添加这两行:
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
});
在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年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
