JavaScript DOM: Getting Images

JavaScript DOM: Getting Images

By /

Images bring life to a webpage, showing product previews, user avatars, or visual stories. These images are represented in HTML by <img> tags, and JavaScript makes it easy to find, update, or animate them through the DOM. Whether you have a single photo or an entire gallery, JavaScript gives you ways to interact with each image.

This guide explores several ways to select images—from grabbing all on a page to only those in a specific container. You’ll see how to change their attributes like src, style them, or even create playful image cycles. All examples are direct and focused—no tips or troubleshooting, just the how-to in clear, engaging steps.

Accessing All Images with document.images

The easiest way to reach every image on your page is by using the document.images collection. It contains all <img> elements and behaves much like an array.

In the example below, we loop through each image and swap its src to a different animal:

<!DOCTYPE html>
<html>
<head>
  <title>Swap Animal Images</title>
</head>
<body>

  <img src="dog.jpg" alt="Dog" />
  <img src="cat.jpg" alt="Cat" />
  <img src="bird.jpg" alt="Bird" />

  <script>

    const allImages = document.images;
    const newSources = ['lion.jpg', 'tiger.jpg', 'bear.jpg'];

    for (let i = 0; i < allImages.length; i++) {

      allImages[i].setAttribute('src', newSources[i]);
      allImages[i].setAttribute('alt', `A wild ${newSources[i].split('.')[0]}`);

    }

  </script>

</body>
</html>

Each picture is replaced with a wild animal image, and the alt text updates to match. This shows how easy it is to change all images at once.

Using getElementsByTagName('img')

Another way to select all images is by tag name. It works similarly to document.images, allowing easy access to every <img> element.

In this example, we add a caption below each image using its alt text:

<!DOCTYPE html>
<html>
<head>
  <title>Captioned Images</title>
</head>
<body>

  <img src="scorpion.jpg" alt="Scorpion" />
  <img src="SubZero.jpg" alt="Sub Zero" />
  <img src="NoobSaibot.jpg" alt="Noob Saibot" />

  <script>

    const images = document.getElementsByTagName('img');

    for (let img of images) {

      const caption = document.createElement('div');

      caption.textContent = img.alt;
      caption.style.fontStyle = 'italic';

      img.after(caption);
      img.style.border = '2px solid gray';

    }

  </script>

</body>
</html>

Each image gets a styled border and a caption below it, enhancing the visual layout with JavaScript.

Getting a Specific Image by id

Sometimes you want to change just one image. If it has an id, you can select it directly with getElementById.

Here’s an example where we enlarge a hero image on page load:

<!DOCTYPE html>
<html>
<head>
  <title>Hero Image Highlight</title>
</head>
<body>

  <img id="hero" src="beach.jpg" alt="Beach scene" />

  <script>

    const heroImg = document.getElementById('hero');

    heroImg.style.width = '100%';
    heroImg.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';

  </script>

</body>
</html>

The hero image expands to full width and gets a soft shadow, making it pop on the page.

Using getElementsByClassName for Groups of Images

If images share a class—like belonging to a gallery—you can select them as a group using getElementsByClassName.

This example wraps each gallery image in a styled frame:

<!DOCTYPE html>
<html>
<head>
  <title>Gallery Frames</title>
</head>
<body>

  <img class="gallery" src="rose.jpg" alt="Rose" />
  <img class="gallery" src="sunflower.jpg" alt="Sunflower" />

  <script>

    const galleryImages = document.getElementsByClassName('gallery');

    for (let img of galleryImages) {
      img.style.border = '5px solid gold';
      img.style.padding = '5px';
    }

  </script>

</body>
</html>

Each .gallery image is framed with gold borders and padding, giving it a polished look.

Using querySelector to Get a Single Image

You can use CSS selectors to pick a single image using querySelector.

Here, we flip the first card image horizontally:

<!DOCTYPE html>
<html>
<head>
  <title>Flip Card Image</title>
</head>
<body>

  <div class="card"><img src="wizard.jpg" alt="Wizard" /></div>
  <div class="card"><img src="knight.jpg" alt="Knight" /></div>

  <script>

    const firstCardImg = document.querySelector('.card img');
    firstCardImg.style.transform = 'scaleX(-1)';

  </script>

</body>
</html>

Only the first .card img flips, creating an interesting visual twist.

Using querySelectorAll to Get Multiple Images

To affect multiple images, use querySelectorAll with a selector.

Below, all .card img get a drop shadow effect:

<!DOCTYPE html>
<html>
<head>
  <title>Shadow All Cards</title>
</head>
<body>

  <div class="card"><img src="princess.jpg" alt="Princess" /></div>
  <div class="card"><img src="dragon.jpg" alt="Dragon" /></div>

  <script>

    const cardImages = document.querySelectorAll('.card img');

    cardImages.forEach(img => {
      img.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
    });

  </script>

</body>
</html>

This applies a subtle shadow to every image inside a .card, enhancing depth and visual appeal.

Changing Image Attributes

You can change any image attribute, including src, alt, width, or height.

Below is an example where a new src is set and alt text is updated accordingly:

<!DOCTYPE html>
<html>
<head>
  <title>Update Image Source</title>
</head>
<body>

  <img id="myImg" src="lake.jpg" alt="Lake view" />

  <script>

    const myImg = document.getElementById('myImg');
    myImg.src = 'mountain.jpg';
    myImg.alt = 'Mountain peak';
    myImg.width = 600;

  </script>

</body>
</html>

The src, alt, and even size of the image are updated with simple JavaScript commands.

Fun: Cycle Through Images with a Button

Here’s a playful example that swaps an image when a button is clicked:

<!DOCTYPE html>
<html>
<head>
  <title>Image Cycler</title>
</head>
<body>

  <img id="cycler" src="spring.jpg" alt="Spring" width="300" />
  <button id="cycleBtn">Change Season</button>

  <script>

    const seasons = ['spring.jpg', 'summer.jpg', 'autumn.jpg', 'winter.jpg'];
    const img = document.getElementById('cycler');
    const button = document.getElementById('cycleBtn');
    let index = 0;

    button.addEventListener('click', () => {

      index = (index + 1) % seasons.length;
      img.src = seasons[index];
      img.alt = seasons[index].split('.')[0];

    });

  </script>

</body>
</html>

Each click cycles through four images, changing the src and alt text for a charming seasonal effect.

Scoped Image Selection Inside a Specific Container

If you only want images in a specific area, you can scope your selection accordingly.

Here we style images only inside a #zoo section:

<!DOCTYPE html>
<html>
<head>
  <title>Zoo Section</title>
</head>
<body>

  <div id="zoo">
    <img src="elephant.jpg" alt="Elephant" />
    <img src="giraffe.jpg" alt="Giraffe" />
  </div>

  <img src="city.jpg" alt="City">

  <script>

    const zooSection = document.getElementById('zoo');
    const zooImages = zooSection.getElementsByTagName('img');

    for (let img of zooImages) {
      img.style.border = '3px solid green';
    }

  </script>

</body>
</html>

Only the images inside #zoo get a green border—city image stays unchanged.

Accessing Images by Index

You can treat image collections like arrays and select by index. Here’s how you can style the third image differently:

<!DOCTYPE html>
<html>
<head>
  <title>Index Style</title>
</head>
<body>

  <img src="img1.jpg" alt="One" />
  <img src="img2.jpg" alt="Two" />
  <img src="img3.jpg" alt="Three" />
  <img src="img4.jpg" alt="Four" />

  <script>

    const images = document.getElementsByTagName('img');

    if (images.length >= 3) {
      images[2].style.opacity = '0.5';
    }

  </script>

</body>
</html>

The third image becomes semi-transparent, showing how easy it is to select by index.

Conclusion

This guide demonstrated many ways to find and work with images in the DOM. You saw how to select all images, just one, groups by class, scoped images using containers, and even cycle through pictures with a click. You also learned how to change any attribute and style images in creative ways.

With these methods, you can build image galleries, photo sliders, thematic updates, and fun interactive interfaces using pure JavaScript.

References

If you’re curious to explore further or want to double-check what you’ve learned, these trusted documentation pages offer more detailed explanations and examples:

Related Posts

Scroll to Top