Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to work with document.images in JavaScript?
The document.images property in JavaScript provides access to all <img> elements in a document. It returns an HTMLCollection containing all image elements, allowing you to count, access, and manipulate images programmatically.
Syntax
document.images document.images.length document.images[index] document.images.namedItem(name)
Properties and Methods
The document.images collection provides:
- length - Returns the number of images in the document
- [index] - Access image by numeric index (0-based)
- namedItem() - Access image by name or id attribute
Example: Counting Images
<!DOCTYPE html>
<html>
<head>
<title>Document Images Example</title>
</head>
<body>
<h1>TutorialsPoint Tutorials</h1>
<img src="/javascript/images/javascript-mini-logo.jpg" alt="JavaScript Logo">
<img src="/html5/images/html5-mini-logo.jpg" alt="HTML5 Logo">
<img src="/css/images/css-mini-logo.jpg" alt="CSS Logo">
<script>
var totalImages = document.images.length;
document.write("<p>Total images found: " + totalImages + "</p>");
</script>
</body>
</html>
Example: Accessing Individual Images
<!DOCTYPE html>
<html>
<head>
<title>Access Images Example</title>
</head>
<body>
<img src="/javascript/images/logo1.jpg" alt="Logo 1" id="firstImg">
<img src="/javascript/images/logo2.jpg" alt="Logo 2" name="secondImg">
<div id="output"></div>
<script>
// Access by index
var firstImage = document.images[0];
document.getElementById("output").innerHTML +=
"<p>First image source: " + firstImage.src + "</p>";
// Access by name
var namedImage = document.images.namedItem("secondImg");
document.getElementById("output").innerHTML +=
"<p>Named image alt: " + namedImage.alt + "</p>";
</script>
</body>
</html>
Example: Looping Through All Images
<!DOCTYPE html>
<html>
<head>
<title>Loop Images Example</title>
</head>
<body>
<img src="/images/photo1.jpg" alt="Photo 1">
<img src="/images/photo2.jpg" alt="Photo 2">
<img src="/images/photo3.jpg" alt="Photo 3">
<div id="imageList"></div>
<script>
var imageList = document.getElementById("imageList");
imageList.innerHTML = "<h3>Image Details:</h3>";
for (var i = 0; i < document.images.length; i++) {
var img = document.images[i];
imageList.innerHTML +=
"<p>Image " + (i + 1) + ": " + img.alt + " (" + img.src + ")</p>";
}
</script>
</body>
</html>
Key Points
-
document.imagesis a live HTMLCollection that updates automatically when images are added or removed - Only
<img>elements are included, not background images or other image formats - Images are indexed starting from 0
- The collection includes images that may not have finished loading
Browser Compatibility
The document.images property is supported in all modern browsers and has been part of the DOM specification since the early days of JavaScript.
Conclusion
The document.images property provides a convenient way to access and manipulate all image elements in a document. Use it to count images, loop through them, or access specific images by index or name.
Updated on: 2026-03-15T23:18:59+05:30
555 Views
Advertisements