Schauen wir uns einige Optionen zum Iterieren über a an NodeList, wenn Sie vom Ausführen von a zurückkehren document.querySelectorAll.
Wir haben einen aktualisierten Artikel dazu geschrieben: Eine Reihe von Optionen für das Durchlaufen von querySelectorAll NodeLists.
Nicht alle Browser unterstützen ForEach on NodeLists, aber diejenigen, die dies tun:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Hier ist eine schwierige Möglichkeit, dies mit einer etwas tieferen Browserunterstützung zu umgehen.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Todd Motto, eine faire Warnung, erklärt, warum diese Methode ziemlich hackig ist und beschreibt über 10 Probleme damit.
Sie können auch einen Klassiker für die Schleife verwenden:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Todd schlägt vor, eine eigene Methode zu entwickeln:
// forEach method, could be shipped as part of an Object Literal/Module var forEach = function (array, callback, scope) ( for (var i = 0; i < array.length; i++) ( callback.call(scope, i, array(i)); // passes back stuff we need ) ); // Usage: // optionally change the scope as final parameter too, like ECMA5 var myNodeList = document.querySelectorAll('li'); forEach(myNodeList, function (index, value) ( console.log(index, value); // passes index + value back! ));Sie können die Liste auch selbst verbreiten, wodurch Sie Zugriff auf andere Array-Methoden erhalten, während Sie gerade dabei sind.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Es gibt auch für… Schleifen. Firefox war der erste, der dies unterstützte, aber die Unterstützung ist ziemlich gut geworden:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Dies ist ziemlich intensiv (wahrscheinlich gefährlich und nicht empfohlen), aber Sie können NodeList dazu bringen, dieselbe forEach-Funktion wie Array zu verwenden, und sie dann verwenden.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Der MDN-Artikel enthält weitere Informationen.