Javascript Reference - HTML DOM images Collection

The images collection returns a list of all the <img> elements in the current document.

Browser Support


`images`	Yes	Yes	Yes	Yes	Yes

Syntax

document.images

Properties

Property	Description
length	Returns the number of <img> elements in the collection

Methods

Method	Description
[index]	index integer starting at 0
item(index)	Returns the element with the specified index starting at 0
namedItem(id)	Get the element from the collection for id

Example

The following code shows how to show the number of <img> elements in the document:


<!DOCTYPE html>
<html>
<body>
<!--from  w w w . j a  va2s.c  o m-->
<img src="http://java2s.com/style/demo/border.png" width="150" height="113">
<img src="http://java2s.com/style/demo/border.png" width="152" height="128">
<img src="http://java2s.com/style/demo/border.png" width="42" height="42">

<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.images.length;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to loop through all <img> elements in the document, and output the URL of each image


<!DOCTYPE html>
<html>
<body>
<!--from w  ww .  jav  a2s. c o  m-->
<img src="http://java2s.com/style/demo/border.png" width="150" height="113">
<img src="http://java2s.com/style/demo/border.png" width="152" height="128">
<img src="http://java2s.com/style/demo/border.png" width="42" height="42">


<button type="button" onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.images;
    var txt = "";
    for (var i = 0; i < x.length; i++) {
        txt = txt +  x[i].src + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to get the URL of the first <img> element (index 0) in the document:


<!DOCTYPE html>
<html>
<body>
<!-- ww w .j  a v a  2  s  .  c om-->
<img src="http://java2s.com/style/demo/border.png" width="150" height="113">
<img src="http://java2s.com/style/demo/border.png" width="152" height="128">
<img src="http://java2s.com/style/demo/border.png" width="42" height="42">

<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.images[0].src;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to get the URL of the first <img> element (index 0) in the document:


<!DOCTYPE html>
<html>
<body>
<!--   www  . java 2s .  co m-->
<img src="http://java2s.com/style/demo/border.png" width="150" height="113">
<img src="http://java2s.com/style/demo/border.png" width="152" height="128">
<img src="http://java2s.com/style/demo/border.png" width="42" height="42">
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.images.item(0).src;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to get the URL of the <img> element with id="myImg" in the document.


<!DOCTYPE html>
<html>
<body>
<!--  w  ww. java2 s. co  m-->
<img src="http://java2s.com/style/demo/border.png" width="150" height="113">
<img src="http://java2s.com/style/demo/border.png" width="150" height="130">
<img id="myImg" src="http://java2s.com/style/demo/border.png" width="42" height="42">
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.images.namedItem("myImg").src;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows: