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.

This post pens down the working and usage of the HTML DOM Document “images” property in JavaScript.

How to Use the HTML DOM Document “images” Property in JavaScript?

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

Syntax

 
The above syntax does not require any additional parameter to return the image collection.

Methods

The HTML DOM “images” collection comes with three methods that are used with the “images” property to get the desired task.

• • Index[0]: This method represents the “<img>” element placed at a specified index.
  • Index(0): The second method is similar to “index[0]” but with a representation difference i.e., “()”.
  • namedItem(id): This method returns the “<img>” element of the specified id.

HTML Code

First, go through the stated HTML code:

 
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.

JavaScript Code

Let’s have an overview of the given JavaScript code:

 
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.

Output

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.

JavaScript Code

Consider the following JavaScript code:

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

Output

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.

JavaScript Code

Proceed to the following code:

 
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.

Output

As seen, the URL of the targeted image i.e., “first” has been displayed in the output.

Conclusion

JavaScript Document object offers the “images” property to get the image collection in a document. It provides three built-in methods that perform the task based on their names including “index[0]”, “index(0)”, and the “namedItem(id)”. Using these methods, the user can also retrieve the URLs of the targeted images. This post provided a brief description to use the HTML DOM Document “images” property in JavaScript.