select all items with class name using document.querySelector

Question

I have 4 images using the class .light-image

I am trying to change them all using js. The code below only grabs the first item, how can I make it grab all 4?

if (window.matchMedia("(max-width: 768px)").matches) {
  document.querySelector('.light-image').src="/app/themes/piranha/assets/public/images/light-open.svg";
}

Answer 1

Instead of querySelector use querySelectorAll that returns a node list of all elements matching the selector (not just the first one).

Then you need to iterate it over the node list.

if (window.matchMedia("(max-width: 768px)").matches) {
  let itemList = [...document.querySelectorAll('.light-image')]
  itemList.forEach(el => el.src="/app/themes/piranha/assets/public/images/light-open.svg";)
}

See this post for more information