Als Antwort auf die ursprüngliche Frage verwenden Sie for/in
falsch. In Ihrem Code key
ist der Index. Um den Wert aus dem Pseudo-Array zu erhalten, müssten Sie dies tun, list[key]
und um die ID zu erhalten, müssten Sie dies tun list[key].id
. Aber Sie sollten dies überhaupt nicht tun for/in
.
Zusammenfassung (hinzugefügt im Dezember 2018)
Verwenden Sie for/in
diese Option niemals zum Iterieren einer NodeList oder einer HTMLCollection. Die Gründe, dies zu vermeiden, werden unten beschrieben.
Alle neueren Versionen moderner Browser (Safari, Firefox, Chrome, Edge) unterstützen die for/of
Iteration in DOM-Listen wie nodeList
oder HTMLCollection
.
Hier ist ein Beispiel:
var list = document.getElementsByClassName("events");
for (let item of list) {
console.log(item.id);
}
Um ältere Browser (einschließlich Dinge wie IE) einzuschließen, funktioniert dies überall:
var list= document.getElementsByClassName("events");
for (var i = 0; i < list.length; i++) {
console.log(list[i].id); //second console output
}
Erklärung, warum Sie nicht verwenden sollten for/in
for/in
ist zum Iterieren der Eigenschaften eines Objekts gedacht. Das heißt, es werden alle iterierbaren Eigenschaften eines Objekts zurückgegeben. Während es für ein Array zu funktionieren scheint (Rückgabe von Array-Elementen oder Pseudo-Array-Elementen), kann es auch andere Eigenschaften des Objekts zurückgeben, die nicht den Erwartungen der Array-ähnlichen Elemente entsprechen. Und raten Sie mal, ein HTMLCollection
odernodeList
Objekt kann beide andere Eigenschaften haben, die mit einer for/in
Iteration zurückgegeben werden. Ich habe dies gerade in Chrome versucht. Wenn Sie es so wiederholen, wie Sie es wiederholt haben, werden die Elemente in der Liste (Indizes 0, 1, 2 usw.) abgerufen, aber auch die Eigenschaften length
und item
. Die for/in
Iteration funktioniert für eine HTMLCollection einfach nicht.
Unter http://jsfiddle.net/jfriend00/FzZ2H/ erfahren Sie, warum Sie eine HTMLCollection nicht iterieren können for/in
.
In Firefox ist Ihr for/in
würde Iteration die folgenden Elemente zurückgeben (alle iterierbaren Eigenschaften des Objekts):
0
1
2
item
namedItem
@@iterator
length
Hoffentlich können Sie jetzt sehen, warum Sie for (var i = 0; i < list.length; i++)
stattdessen verwenden möchten, damit Sie nur erhalten 0
,1
und 2
in der Iteration.
Im Folgenden finden Sie eine Entwicklung der Entwicklung der Browser im Zeitraum 2015-2018, die Ihnen zusätzliche Möglichkeiten zur Iteration bietet. Keines davon wird jetzt in modernen Browsern benötigt, da Sie die oben beschriebenen Optionen verwenden können.
Update für ES6 im Jahr 2015
Zu ES6 wurde hinzugefügt, Array.from()
dass eine Array-ähnliche Struktur in ein tatsächliches Array konvertiert wird. So kann man eine Liste direkt wie folgt aufzählen:
"use strict";
Array.from(document.getElementsByClassName("events")).forEach(function(item) {
console.log(item.id);
});
Arbeitsdemo (in Firefox, Chrome und Edge ab April 2016): https://jsfiddle.net/jfriend00/8ar4xn2s/
Update für ES6 im Jahr 2016
Sie können jetzt das ES6 for / of-Konstrukt mit a NodeList
und an verwenden, HTMLCollection
indem Sie dies einfach zu Ihrem Code hinzufügen:
NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
Dann können Sie Folgendes tun:
var list = document.getElementsByClassName("events");
for (var item of list) {
console.log(item.id);
}
Dies funktioniert in der aktuellen Version von Chrome, Firefox und Edge. Dies funktioniert, weil der Array-Iterator sowohl an die NodeList- als auch an die HTMLCollection-Prototypen angehängt wird, sodass beim Array / Iterieren der Array-Iterator verwendet wird, um sie zu iterieren.
Arbeitsdemo: http://jsfiddle.net/jfriend00/joy06u4e/ .
Zweites Update für ES6 im Dezember 2016
Seit Dezember 2016 ist die Symbol.iterator
Unterstützung für Chrome v54 und Firefox v50 integriert, sodass der folgende Code von selbst funktioniert. Es ist noch nicht für Edge integriert.
var list = document.getElementsByClassName("events");
for (let item of list) {
console.log(item.id);
}
Arbeitsdemo (in Chrome und Firefox): http://jsfiddle.net/jfriend00/3ddpz8sp/
Drittes Update für ES6 im Dezember 2017
Ab Dezember 2017 funktioniert diese Funktion in Edge 41.16299.15.0 für ein nodeList
wie in document.querySelectorAll()
, aber nicht für ein HTMLCollection
wie in, document.getElementsByClassName()
sodass Sie den Iterator manuell zuweisen müssen, um ihn in Edge für ein zu verwenden HTMLCollection
. Es ist ein Rätsel, warum sie einen Sammlungstyp reparieren würden, den anderen jedoch nicht. Sie können das Ergebnis von document.querySelectorAll()
mit ES6- for/of
Syntax jetzt jedoch zumindest in aktuellen Versionen von Edge verwenden.
Ich habe auch die obige jsFiddle aktualisiert, sodass sie sowohl HTMLCollection
als auch nodeList
separat getestet und die Ausgabe in der jsFiddle selbst erfasst wird.
Viertes Update für ES6 im März 2018
Per Mesqueeeb wurde auch Symbol.iterator
in Safari Unterstützung integriert, sodass Sie diese for (let item of list)
entweder für document.getElementsByClassName()
oder verwenden können document.querySelectorAll()
.
Fünftes Update für ES6 im April 2018
Offenbar Unterstützung für eine Iteration HTMLCollection
mit for/of
wird Edge 18 im Herbst 2018 kommen.
Sechstes Update für ES6 im November 2018
Ich kann bestätigen, dass Sie mit Microsoft Edge v18 (das im Windows Update vom Herbst 2018 enthalten ist) jetzt sowohl eine HTMLCollection als auch eine NodeList mit for / of in Edge iterieren können.
Daher enthalten jetzt alle modernen Browser native Unterstützung für die for/of
Iteration sowohl der HTMLCollection- als auch der NodeList-Objekte.