The DOM(Document Object Model) is a language-independent interface that comes with numerous methods and properties. The DOM properties allow the user to set and customize the HTML element values such as “backgroundImage(set background image)”, “top(set and return top positioned)”, and many others. Apart from these, the HTML DOM offers a useful “images” property that provides an image collection in a document. It is significant to retrieve the information about available images in an HTML document.
The HTML DOM(Document Object Model) “images” property retrieves the collection of images present in the current HTML document. It gets the total count of the images added to a document except the ones added with the “<input>” elements of “type=img”.
The above syntax does not require any additional parameter to return the image collection.
The HTML DOM “images” collection comes with three methods that are used with the “images” property to get the desired task.
- Index: This method represents the “<img>” element placed at a specified index.
- Index(0): The second method is similar to “index” but with a representation difference i.e., “()”.
- namedItem(id): This method returns the “<img>” element of the specified id.
First, go through the stated HTML code:
<img src="./Downloads/myimage.jpg" id='img1' width="100" height="100">
<img src="./Downloads/myimage1.jpg" id='img2' width="100" height="100">
<img src="./Downloads/myimage2.jpg" id='img3' width="100" height="100">
In this code:
- The “<h2>” tag adds a subheading with the stated statement.
- The “<img>” tag adds an image having the “src” attribute that defines its path, assigned id, and the specified dimension attributes, respectively.
- The second and third “<img>” tags add the other stated images.
- The “<p>” tag creates an empty paragraph to display the computed number of images.
Note: The above-stated HTML code will be followed in all the examples of this post.
Example 1: Applying the HTML DOM Document “images” Property to Get the Number of Images in the Current Document
This example carries out the practical implementation of the “images” property to return the total number of images present in the existing HTML document.
let num = document.images.length;
document.getElementById("demo").innerHTML ="Total number of images: " + num;
In the above code snippet:
- The variable “num” uses the “images” and the “length” properties to compute the total number of images.
- After that, the “getElementById()” method accesses the added empty paragraph using its id “demo” to display the computed number of images via the “innerHTML” property.
The output shows the total number of added images in the document i.e., “3”.
Example 2: Applying the HTML DOM Document “images” Property with the “Index[ ]” Method to Get the URL of the Specified Image
The “images” property can also be utilized with the “index[ ]” method to retrieve the URL of the specified indexed image. Let’s see it practically.
let url = document.images.src;
document.getElementById("demo").innerHTML ="URL of the image is: " + url;
In the above code lines, the “url” variable applies the “images” property with the specified index to get its URL and likewise, display it in the fetched empty paragraph having the id as “demo”.
Here the “images” property returned the URL of the first image added to the document.
Example 3: Applying the HTML DOM Document “images” Property With the “namedItem()” Method to Get the URL of the Specified Image
This example utilizes the “images” property with the “namedItem()” method to return the URL of the accessed image through its id.
Proceed to the following code:
let t = document.images.namedItem("img3").src;
document.getElementById("demo").innerHTML ="URL of the image is: " + t;
Here, the declared variable “t” uses the “images” property along with the “namedItem()” method that accesses the specified image using its id “img3” and similarly returns its URL in the fetched empty paragraph.
As seen, the URL of the targeted image i.e., “first” has been displayed in the output.