Steve Claridge
Ich möchte über einige DOM-Elemente iterieren, ich mache das:
document.getElementsByClassName( "myclass" ).forEach( function(element, index, array) {
//do stuff
});
aber ich bekomme einen Fehler:
document.getElementsByClassName(“myclass”).forEach ist keine Funktion
Ich benutze Firefox 3, also kenne ich beides getElementsByClassName und Array.forEach sind anwesend. Das funktioniert gut:
[2, 5, 9].forEach( function(element, index, array) {
//do stuff
});
Ist das Ergebnis von getElementsByClassName eine Anordnung? Wenn nicht, was ist es?
Athari
Sie können verwenden Array.from um eine Sammlung in ein Array umzuwandeln, was viel sauberer ist als Array.prototype.forEach.call:
Array.from(document.getElementsByClassName("myclass")).forEach(
function(element, index, array) {
// do stuff
}
);
In älteren Browsern, die das nicht unterstützen Array.frommüssen Sie so etwas wie Babel verwenden.
ES6 fügt auch diese Syntax hinzu:
[...document.getElementsByClassName("myclass")].forEach(
(element, index, array) => {
// do stuff
}
);
Rest destrukturierend mit ... funktioniert mit allen Array-ähnlichen Objekten, nicht nur mit Arrays selbst, dann wird die gute alte Array-Syntax verwendet, um ein Array aus den Werten zu konstruieren.
Während die alternative Funktion querySelectorAll (was irgendwie macht getElementsByClassName veraltet) gibt eine Auflistung zurück, die vorhanden ist forEach nativ, andere Methoden wie map oder filter fehlen, daher ist diese Syntax immer noch nützlich:
[...document.querySelectorAll(".myclass")].map(
(element, index, array) => {
// do stuff
}
);
[...document.querySelectorAll(".myclass")].map(element => element.innerHTML);
Haritsinh Gohil
getElementsByClassName kehrt zurück HTMLCollection in modernen Browsern.
welches ist
Array-ähnliches Objekt, ähnlich wie Argumente was iterierbar ist for...of Schleife siehe unten was MDN Doc sagt dazu:
Das Die for…of-Anweisung erstellt eine Schleife, die über iterierbare Objekte iterierteinschließlich: eingebauter String, Array, Array-ähnliche Objekte (z. B. arguments
oder NodeList), TypedArray, Map, Set und benutzerdefinierte Iterables. Es ruft einen benutzerdefinierten Iterations-Hook mit Anweisungen auf, die für den Wert jeder einzelnen Eigenschaft des Objekts ausgeführt werden sollen.
Javascript-Beispiel
for (const element of document.getElementsByClassName("classname")){
element.style.display="none";
}
Typoskript-Beispiel
let elements = document.getElementsByClassName('classname');
let i;
for (i = 0; i < elements.length; i++) {
if (elements[i] instanceof HTMLElement) {
elements[i].style.display = "none";
}
}
vergoldet
Das ist der sicherere Weg:
var elements = document.getElementsByClassName("myclass");
for (var i = 0; i < elements.length; i++) myFunction(elements[i]);
Hier ist ein Test, den ich auf jsperf erstellt habe:
https://jsperf.com/vanillajs-loop-through-elements-of-class
Die leistungsstärkste Variante in Chrome und Firefox ist die gute alte for-Schleife in Kombination mit document.getElementsByClassName:
var elements = document.getElementsByClassName('testClass'), elLength = elements.length;
for (var i = 0; i < elLength; i++) {
elements.item(i).textContent="Tested";
};
In Safari ist diese Variante der Gewinner:
var elements = document.querySelectorAll('.testClass');
elements.forEach((element) => {
element.textContent="Tested";
});
Wenn Sie die leistungsfähigste Variante für alle Browser wollen, könnte es diese sein:
var elements = document.getElementsByClassName('testClass');
Array.from(elements).map(
(element) => {
return element.textContent="Tested";
}
);
10107700cookie-checkIteration über das Ergebnis von getElementsByClassName mit Array.forEachyes