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.