我试图在HTMLCollectionOf中设置所有元素的获取id。我写了下面的代码:
var list = document.getElementsByClassName("events");
console.log(list[0].id);
for (key in list) {
console.log(key.id);
}
但我在控制台得到以下输出:
event1
undefined
这和我预料的不一样为什么第二个控制台输出是未定义的，而第一个控制台输出是event1?
当前回答
我经常用的简单方法
let list = document.getElementsByClassName("events");
let listArr = Array.from(list)
在此之后，您可以在选择上运行任何所需的Array方法
listArr.map(item => console.log(item.id))
listArr.forEach(item => console.log(item.id))
listArr.reverse()
其他回答
在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
你也可以这样做:
let elements = document.getElementsByClassName("classname");
for(let index in elements) {
if(index <= elements.length) {
console.log(elements[index]);
}
}
let elements = document.getElementsByClassName("classname"); For (let index in elements) { If (index <= elements.length) { console.log(元素(指数)); ｝ ｝ <div class="classname"> element 1 </div> . <div class="classname"> element 2 </div> . <div class="classname"> element 3 </div> .
or
let elements = document.getElementsByClassName("classname");
for(let ele of elements) {
console.log(ele);
}
let elements = document.getElementsByClassName("classname"); For (let ele of elements) { console.log(避署); ｝ <div class="classname"> element 1 </div> . <div class="classname"> element 2 </div> . <div class="classname"> element 3 </div> . <div class="classname"> element 4 </div> .
如果你使用ES的旧版本(例如ES5)，你可以使用as any:
for (let element of elementsToIterate as any) {
console.log(element);
}
在边缘
if(!NodeList.prototype.forEach) {
NodeList.prototype.forEach = function(fn, scope) {
for(var i = 0, len = this.length; i < len; ++i) {
fn.call(scope, this[i], i, this);
}
}
}
