La force de la méthode forEach()
Pour boucler dans un lot d'éléments DOM, rien de mieux que d'utiliser .forEach(), et ainsi de remplacer la méthode jQuery .each().
Ainsi, ce code utilisant jQuery :
$('.bloc-extra').each(function (idx, elem) { ... });
...peut être remplacé par ceci en JS natif :
document.querySelectorAll('.bloc-extra').forEach(elem => { ... });
On remarquera ici que la function() dans le code jQuery utilise deux arguments et qu'à l'usage, le premier argument idx n'est pas utile la plupart du temps. Ce fut donc une bonne idée d'inverser l'ordre des arguments pour forEach().
Voir NodeList.prototype.forEach() sur MDN
Ceci dit, forEach(), accompagné de addEventListener(), sert à remplacer d'autres méthodes jQuery.
// Code jQuery $(".select_genre").change(e => { }); // Code natif document.querySelectorAll('.select_genre').forEach(el => el.addEventListener('change', e => { }));
Oui, le code natif est plus long à écrire, mais il a l'avantage d'être clair pour le réviseur : il indique qu'on s'adresse à plusieurs éléments. Le code jQuery ne précise pas ça.
J'ai donné en exemple l'événement change, mais ça s'applique à tous les événements.