The HTML DOM image collection property returns the collection of all <img> HTML element in the HTML document.
Syntax
Following is the syntax −
document.images
Properties
Following is the property of DOM Images Collection −
Property | Explanation |
---|---|
length | It returns the number of <img> HTML element in the HTML document. |
Methods
Following are the methods of DOM Images Collection
Method | Explanation |
---|---|
[index] | It returns the specified index <img> element from the collection |
item(index) | It returns the specified index <img> element from the collection. |
namedItem(id) | It returns the specified id <img> element from the collection. |
Example
Let us see an example of DOM images collection property −
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; } .btn{ background-color:lightblue; border:none; height:2rem; border-radius:50px; width:60%; margin:1rem auto; display:block; } .show{ color:#db133a; font-size:2rem; font-weight:bold; } </style> </head> <body> <h1>DOM Image Object Example</h1> <img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Learn Spring"> <img src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg" alt="Learn Hibernate"> <img src="https://www.tutorialspoint.com/sql/images/sql-mini-logo.jpg" alt="Learn SQL"> <img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg" alt="Learn PL/SQL"> <button onclick="getCount()" class="btn">Count Number Of Images</button> <div class="show"></div> <script> function getCount() { document.querySelector('.show').innerHTML=document.images.length; } </script> </body> </html>
Output
This will produce the following output −
Click on “Count Number Of Images” button to get the total number of images on this web page −