Loop nas correspondências querySelectorAll - CSS-Tricks

Vejamos algumas opções para iterar sobre a NodeList, conforme você volta após a execução de a document.querySelectorAll.

Escrevemos um artigo atualizado sobre isso: Um grupo de opções para fazer loop em querySelectorAll NodeLists.

Nem todos os navegadores suportam forEach em NodeLists, mas para aqueles que:

buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));

Esta é uma maneira complicada de contornar isso com um suporte um pouco mais profundo ao navegador.

var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));

Aviso justo, Todd Motto explica por que esse método é bastante hacky, detalhando mais de 10 problemas com ele.

Você também pode usar um loop for clássico:

var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )

A sugestão de Todd é fazer seu próprio método:

// 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! ));

Você também pode espalhar a lista por conta própria, o que lhe dará acesso a outros métodos de array enquanto estiver fazendo isso.

(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));

Existem também para ... de loops. O Firefox foi o primeiro a oferecer suporte a isso, mas o suporte ficou muito bom:

for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )

Isso é muito intenso (provavelmente perigoso e não recomendado), mas você pode fazer com que NodeList tenha a mesma função forEach que Array tem e, em seguida, use-a.

NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))

Há um pouco mais de informações no artigo MDN.