Find out how many <img> elements there are in the document:
var x = document.images.length;
Click the button to display the number of images in the document.
<!DOCTYPE html> <html> <body> <img src="image1.png" alt="flower" width="150" height="113"> <img src="image2.png" alt="flower" width="152" height="128"> <img src="image3.png" alt="Smiley face" width="42" height="42"> <button onclick="myFunction()">Test</button> <p id="demo"></p> <script> function myFunction() {//w w w.jav a 2 s.c om var x = document.images.length; document.getElementById("demo").innerHTML = x; } </script> </body> </html>
The images collection returns a collection of all <img> elements in the document.
The elements in the collection are sorted as they appear in the source code.
The images collection does not return a collection of <input> elements with type="image".
| Property | Description |
|---|---|
| length | Returns the number of <img> elements in the collection. |
This property is read-only
| Method | Description |
|---|---|
| [index] | Returns the <img> element from the collection with the index starting at 0. Returns null if the index number is out of range |
| item(index) | Returns the <img> element from the collection with the index starting at 0. Returns null if the index number is out of range |
| namedItem(id) | Returns the <img> element from the collection with the specified id. Returns null if the id does not exist |