HTML | DOM images Collection Property

The images collection property in HTML is used to return the collection of <img> elements in the document. It can be used for knowing the count of images inserted in the document using the <img> tag. The <input> elements with type = image are not counted in the image property.

Syntax:

document.images

Property: It returns the number of <img> elements in the collections.

Methods: The DOM images collection contains three methods which are given below:

[index]: It is used to return the element of selected index. The index value starts with 0. It returns NULL if the index value is out of range.

item(index): It is used to return the <img> element of selected index. The index value starts with 0. It returns NULL if the index value is out of range.

namedItem(id): It is used to returns the <img> element from the collection with given id attribute. It returns NULL if the id is not valid.

Below programs illustrate the document.image property in HTML:

Example 1: Using the length property to return the number of <img> elements in the collection.

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<title>

DOM document.image() Property

</title>

<style>

h1 {

color: green;

}

h2 {

font-family: Impact;

}

body {

text-align: center;

}

</style>

</head>

<body>

<h1>GeeksforGeeks</h1>

<h2>DOM document.image Property</h2>

<imgsrc="home.png"alt="homepage"

width="150"height="150">

<imgsrc="internships.png"alt="internships"

width="150"height="150">

<imgsrc="coding.png"alt="Coding Practice time"

width="150"height="150">

<p>

For displaying the image count, double

click the "View Image Count" button:

</p>

<buttonondblclick="myImage()">

View Image Count

</button>

<pid="image"></p>

<script>

function myImage() {

var i = document.images.length;

document.getElementById("image").innerHTML = i;

}

</script>

</body>

</html>

chevron_right

filter_none

Output:

Example 2: Using the URL property to return the URL of the first <img> element in the collection.

filter_none

editclose

play_arrow

linkbrightness_4code

<!DOCTYPE html>

<html>

<head>

<title>

DOM document.image() Property

</title>

<style>

h1 {

color: green;

}

h2 {

font-family: Impact;

}

body {

text-align: center;

}

</style>

</head>

<body>

<h1>GeeksforGeeks</h1>

<h2>DOM document.image Property</h2>

<imgsrc="home.png"alt="homepage"

width="150"height="150">

<imgsrc="internships.png"alt="internships"

width="150"height="150">

<imgsrc="coding.png"alt="Coding Practice time"

width="150"height="150">

<p>

For displaying the URL of the first image,

double click the "View Image URL" button:

</p>

<buttonondblclick="myImage()">

View Image URL

</button>

<pid="image"></p>

<script>

function myImage() {

var i = document.images[0].src;

document.getElementById("image").innerHTML = i;

}

</script>

</body>

</html>

chevron_right

filter_none

Output:After click on the button:

Example 3: Using the nameditem property to return the URL of the <img> element in the collection.

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.