Boucle sur querySelectorAll Matches - Astuces CSS

Examinons quelques options pour itérer sur a NodeList, lorsque vous revenez d'exécuter un document.querySelectorAll.

Nous avons écrit un article mis à jour à ce sujet: Un tas d'options pour boucler sur querySelectorAll NodeLists.

Tous les navigateurs ne prennent pas en charge pourEach sur les listes de nœuds, mais pour ceux qui le font:

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

Voici un moyen délicat de contourner cela avec une prise en charge un peu plus approfondie du navigateur.

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

Attention, Todd Motto explique pourquoi cette méthode est plutôt piratée, détaillant plus de 10 problèmes avec elle.

Vous pouvez également utiliser une boucle for classique:

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

La suggestion de Todd est de créer votre propre méthode:

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

Vous pouvez également diffuser la liste vous-même, ce qui vous donnerait ensuite accès à d'autres méthodes de tableau pendant que vous y êtes.

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

Il y a aussi pour… des boucles. Firefox a été le premier à prendre en charge cela, mais le support est devenu plutôt bon:

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

C'est assez intense (probablement dangereux et non recommandé) mais vous pouvez faire en sorte que NodeList ait la même fonction forEach que Array, puis l'utiliser.

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

Il y a un peu plus d'informations dans l'article MDN.