A Bunch of Options for Looping Over querySelectorAll NodeLists | CSS-Tricks - CSS-Tricks

PHOTO EMBED

Sat Mar 19 2022 05:56:37 GMT+0000 (Coordinated Universal Time)

Saved by @mboljar #javascript

for .. of
Browser support for for .. of loops looks pretty good and this seems like a super clean syntax to me:

for (const button of buttons) {
  button.addEventListener('click', () => {
    console.log("for .. of worked");
  });
}
 Save
Make an array right away
const buttons = Array.prototype.slice.apply(
  document.querySelectorAll(".js-do-thing")
);
 Save
Now you can use all the normal array functions.

buttons.forEach((button) => {
  console.log("apply worked");
});
content_copyCOPY

https://css-tricks.com/a-bunch-of-options-for-looping-over-queryselectorall-nodelists/