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

Answer 2

querySelector vs querySelectorAll

Your current code works on the assumption that document.querySelector always returns a single (and non-null, non-undefined) HTMLImageElement object, whereupon your code immediately sets the .src property.

However, the querySelectorAll function returns a NodeList<TElement> object, which is an iterable collection of HTML elements instead of a singular nullable object reference.

If you're coming from a jQuery background you might be used to how jQuery's $('selector') function always returns a (wrapped) collection of elements, but it has an API design that allows you to set properties and call member functions on all elements in the collection as though the returned object represented a single element.

...unfortunately that style of API design (does it have a name?) doesn't apply anymore (_{good riddance...}), so you need be familiar with how singular (scalar) object references compare to iterables.

In modern JavaScript, when you have an iterable collection you need to use for(of) to access, edit, and work with each object in the collection, like so:

(I changed your selector to img.light-image to prevent any non-<img/> elements from being inadvertently returned).

if (window.matchMedia("(max-width: 768px)").matches) {
  const images = document.querySelectorAll('img.light-image'); // <-- `images: NodeList<HTMLImageElement>`
  for( const img of images ) { // <-- `img: HTMLImageElement`
    img.src = "/app/themes/piranha/assets/public/images/light-open.svg";
  }
}

In old and obsolete (and especially non-portable) JavaScript, like from the days when we had to use jQuery, it was common to use the .forEach member function to succinctly iterate through a collection - however this is unwise, unsafe, and just passé now; namely because .forEach is not well-defined: for example, NodeList<T>.forEach is not standardized or in any formal specifications, according to the MDN.

A better idea:

Fun-fact: you don't need any JavaScript!

What you're trying to accomplish can be achieved using only CSS:

Remove your script and open your .css file (or inline <style> element) and put this instead:

See here: Is it possible to set the equivalent of a src attribute of an img tag in CSS?

@media screen and (max-width: 768px) {

    img.light-image {
        content: url("/app/themes/piranha/assets/public/images/light-open.svg")
    }

}