Laten we eens kijken naar enkele opties voor het herhalen van a NodeList, terwijl u terugkeert van het uitvoeren van a document.querySelectorAll.
We hebben hier een bijgewerkt artikel over geschreven: A Bunch of Options for Looping Over querySelectorAll NodeLists.
Niet alle browsers ondersteunen voorElk op NodeLists, maar voor degenen die dat wel doen:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Hier is een lastige manier om dat te omzeilen met een wat diepere browserondersteuning.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Eerlijke waarschuwing, Todd Motto legt uit waarom deze methode nogal hacky is, met meer dan 10 problemen ermee.
Je kunt ook een klassieke for loop gebruiken:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Todd's suggestie is om je eigen methode te maken:
// 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! ));U kunt de lijst ook zelf verspreiden, waardoor u toegang krijgt tot andere arraymethoden terwijl u bezig bent.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Er zijn ook voor ... van loops. Firefox was de eerste die dit ondersteunde, maar de ondersteuning is redelijk goed geworden:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Dit is behoorlijk intens (waarschijnlijk gevaarlijk en niet aanbevolen), maar je zou NodeList voor elke functie dezelfde kunnen laten hebben als Array, en het dan gebruiken.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Er is wat meer informatie in het MDN-artikel.