Давайте рассмотрим некоторые варианты итерации NodeList, когда вы вернетесь после запуска document.querySelectorAll.
Мы написали обновленную статью об этом: Набор параметров для наложения циклов по querySelectorAll NodeLists.
Не все браузеры поддерживают forEach в NodeLists, но для тех, которые поддерживают:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Вот хитрый способ обойти это с более глубокой поддержкой браузера.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Честное предупреждение, Тодд Мотто объясняет, почему этот метод является довольно хакерским, подробно описывая более 10 проблем с ним.
Вы также можете использовать классический цикл for:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )Предложение Тодда - создать свой собственный метод:
// 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! ));Вы также можете распространить список самостоятельно, что тогда предоставит вам доступ к другим методам массива, пока вы работаете с ним.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));Также есть для… петель. Firefox был первым, кто поддержал это, но поддержка стала довольно хорошей:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Это довольно интенсивно (вероятно, опасно и не рекомендуется), но вы можете заставить NodeList иметь ту же функцию forEach, что и Array, а затем использовать ее.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))В статье MDN есть немного больше информации.