JavaScript Document images Property

What You’ll Learn

Document.images is a read-only instance property that returns a live HTMLCollection of every <img> in the document. Learn MDN’s banner search loop, index vs item() access, live updates, and five examples with try-it labs.

Introduction

Need every image on a page without writing a selector? document.images gives you a ready-made collection of all <img> elements.

MDN: the read-only property returns a collection of the images in the current HTML document. Each entry is an HTMLImageElement representing a single image element.

Related Document tutorials: forms, embeds, anchors, Document constructor.

Understanding Document.images

A read-only instance property on Document. Its value is a live HTMLCollection of image elements.

• Value — live HTMLCollection of all <img> elements (MDN).
• Each item — HTMLImageElement with src, alt, width, etc.
• Access — document.images[0] or document.images.item(0) (MDN: equivalent).
• Length — document.images.length counts images on the page.
• Iterate — for...of document.images works in modern browsers.

📝 Syntax

document.images

Value

An HTMLCollection — a live list of every HTMLImageElement in the document (MDN).

MDN example

for (const image of document.images) {
  if (image.src === "banner.gif") {
    console.log("Found the banner");
  }
}

Note: image.src is usually an absolute URL in the browser, so production code often uses image.src.endsWith("banner.gif") or compares the filename.

⚖️ Document Collection Properties

Examples Gallery

Examples follow MDN Document: images. Each item in the collection is an HTMLImageElement.

console.log(document.images.length);
console.log("Has images?", document.images.length > 0);

2
Has images? true

for (const image of document.images) {
  if (image.src.endsWith("banner.gif")) {
    console.log("Found the banner");
  }
}

Found the banner

const firstByIndex = document.images[0];
const firstByItem = document.images.item(0);

console.log(firstByIndex === firstByItem);
console.log(firstByIndex?.src);

true
https://example.com/photo.jpg

for (const img of document.images) {
  console.log(img.alt || "(missing alt)");
}

Company logo
(missing alt)

console.log("before:", document.images.length);

const img = document.createElement("img");
img.src = "https://via.placeholder.com/48";
img.alt = "Added dynamically";
document.body.appendChild(img);

console.log("after:", document.images.length);

before: 1
after: 2

🚀 Common Use Cases

• Image galleries — count or iterate all thumbnails.
• Lazy-load audits — inspect loading attributes on every img.
• Accessibility — find images missing alt text.
• Preload checks — verify banner or hero images loaded.
• CMS / admin tools — report how many images a page contains.
• Legacy scripts — quick all-images access without selectors.

📝 Notes

• MDN: Baseline Widely available (since June 2018) — no Deprecated / Experimental / Non-standard banner.
• Only <img> elements — not CSS backgrounds or inline SVG (unless wrapped in img).
• image.src is typically an absolute URL; compare filenames carefully (MDN example).
• document.images[i] and document.images.item(i) are equivalent (MDN).
• Related: forms, embeds, hidden, Document constructor.

💡 Best Practices