How to get all the images from HTML documents using JavaScript?

August 27, 2020 - 1 min read

To get all the images present in the document or HTML, you can use the read-only property called images in the document object.

Let's say you have a HTML document with 3 image tags like this,

<body>
  <img src="https://via.placeholder.com/150" alt="Placeholder image" />
  <img src="https://via.placeholder.com/200" alt="Placeholder image" />
  <img src="https://via.placeholder.com/250" alt="Placeholder image" />
</body>

Now let's get all the images in the HTML using the document.images property in JavaScript.

// get all the images from HTML document
const images = document.images;

The references to the images are returned as an HTMLcollection.

// get all the images from HTML document
const images = document.images;

console.dir(images);

To see working example see JSBin.

Feel free to share if you found this useful 😃.