HTML - DOM Document images Property

Quiz

HTML DOM document images collection is a read-only property used for returning all the <img> elements present within HTML document as a collection.

Syntax

document.images;

Properties

Property	Description
length	It return the number of <img> element present in HTML document.

Methods

Below table shows a list of methods offered by DOM images collection.The elements present in the collection are sorted and are presented in the same order as they appear in the HTML document.

Methods	Description
[index]	To return the <img> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of bound.
item(index)	To return the <img> element from the collection at the given index. Indexing starts from 0 and null is returned if the index is out of range. It is similar to first method.
namedItem(id)	To return the <img> element from the collection with the given id. Null is returned if the id doesnt exist.

Return Value

It returns an HTMLCollection which lists all the <img> elements present in the document.

Examples of HTML DOM Document 'images' Property

The following examples illustrates use of images properties and methods.

Get Number of <img> Elements

In the following example, length property is used to return the number of <img> elements in document.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo">
    <p>Click to get the number of <img> element.</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images.length;
            document.getElementById("images").innerHTML =x;
        }
    </script>
</body>
</html>

Get URL of the First Image

In this example, we get the URL of the first image using images [index] method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo">
    <p>Click to get the URL of the first image</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images[0].src;
            document.getElementById("images").innerHTML = x;
        }
    </script>
</body>
</html>

Get URL of the Second Image

In this example, we get the URL of the second image using images item(index) method.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo">
    <p>Click to get the URL of the second image</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images.item(1).src;
            document.getElementById("images").innerHTML = x;
        }
    </script>
</body>
</html>

Get the URL of the Image with Specified id

The following example returns the URL of <img> element with specified id.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo" id="img1">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo" id="img2">
    <p>Click to get the URL of the image with id "img2"</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images.namedItem("img2").src;
            document.getElementById("images").innerHTML = x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
images	Yes 1	Yes 12	Yes 1	Yes 1	Yes 12.1

html_dom.htm

Print Page