Przyjrzyjmy się niektórym opcjom iteracji po a NodeList, gdy wrócisz z uruchomienia a document.querySelectorAll.
Napisaliśmy zaktualizowany artykuł na ten temat: Kilka opcji zapętlania zapytania querySelectorAll NodeLists.
Nie wszystkie przeglądarki obsługują forEach na NodeLists, ale te, które to robią:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Oto trudny sposób obejścia tego problemu dzięki nieco głębszej obsłudze przeglądarek.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Uczciwe ostrzeżenie, Todd Motto wyjaśnia, dlaczego ta metoda jest raczej zepsuta, szczegółowo opisując ponad 10 problemów z nią.
Możesz także użyć klasycznej pętli for:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Sugeruje Todda, aby stworzyć własną metodę:
// 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! ));Możesz również samodzielnie rozłożyć listę, co da ci dostęp do innych metod tablicowych, gdy jesteś na tym.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Są też… pętle. Firefox był pierwszym, który to obsługiwał, ale wsparcie stało się całkiem dobre:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Jest to dość intensywne (prawdopodobnie niebezpieczne i niezalecane), ale możesz sprawić, by NodeList miał taką samą funkcję forEach jak Array, a następnie jej użyj.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Nieco więcej informacji znajduje się w artykule MDN.