Veamos algunas opciones para iterar sobre a NodeList, a medida que regresa de ejecutar a document.querySelectorAll.
Hemos escrito un artículo actualizado sobre esto: Un montón de opciones para recorrer querySelectorAll NodeLists.
No todos los navegadores son compatibles con cada uno en NodeLists, pero para aquellos que sí lo hacen:
buttons.forEach((button) => ( button.addEventListener('click', () => ( console.log("forEach worked"); )); ));Aquí hay una forma complicada de solucionarlo con un soporte de navegador un poco más profundo.
var divs = document.querySelectorAll('div'); ().forEach.call(divs, function(div) ( // do whatever div.style.color = "red"; ));Una advertencia justa, Todd Motto explica por qué este método es bastante engañoso, detallando más de 10 problemas con él.
También puede usar un bucle for clásico:
var divs = document.querySelectorAll('div'), i; for (i = 0; i < divs.length; ++i) ( divs(i).style.color = "green"; )La sugerencia de Todd es hacer su propio 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! ));También puede difundir la lista usted mismo, lo que luego le dará acceso a otros métodos de matriz mientras lo hace.
(… buttons).forEach((button) => ( button.addEventListener('click', () => ( console.log("spread forEach worked"); )); ));También hay para… de bucles. Firefox fue el primero en admitir esto, pero el soporte ha mejorado bastante:
for (const button of buttons) ( button.addEventListener('click', () => ( console.log("for… of worked"); )); )Esto es bastante intenso (probablemente peligroso y no recomendado) pero puede hacer que NodeList tenga la misma función forEach que Array y luego usarla.
NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll('div').forEach(function(el) ( el.style.color = "orange"; ))Hay un poco más de información en el artículo de MDN.