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

Published August 27, 2020

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 😃.

Share on: Facebook Twitter