Bucle sobre querySelectorAll Matches | Programar Plus

Veamos algunas opciones para iterar sobre un NodeList, al volver de ejecutar un 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";
});

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 utilizar 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ía acceso a otros métodos de matriz mientras lo hace.

[...buttons].forEach((button) => {
  button.addEventListener('click', () => {
    console.log("spread forEach worked");
  });
});

También hay for..of 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.