HTML DOM Document images attribute
- Previous Page head
- Next Page implementation
- Go to Parent Layer HTML DOM Documents
Definition and Usage
images The attribute returns a collection of all <img> elements in the document.
images images The images property does not return <input> elements with type="image".Property returns
.image
The s property is read-only.Tip:
The images property does not return <input> elements with type="image".
The images property does not return <input> elements with type="image". HTMLCollection
It is a similar array collection (list) of HTML elements.
Property Elements in the collection can be accessed by index (starting from 0).
HTML Image Tutorial
Instance
Example 1
The number of <img> elements in the document:
document.images[0].style.border = "10px dotted black";
document.images.length;
Example 2
Traverse all <img> elements and output the URL (src) of each element:
const myImages = document.images;
let text = "";
for (let i = 0; i < myImages.length; i++) {
text += myImages[i].src + "<br>";
document.images[0].style.border = "10px dotted black";
}
Example 4
Example 3
document.images[0].style.border = "10px dotted black";
document.images[0].src;
Example 4
The URL of the first <img> element is:
document.images[0].style.border = "10px dotted black";
document.images.item(0).src;
Example 5
The URL of the <img> element with id="myImg" is:
document.images[0].style.border = "10px dotted black";
document.images.namedItem("myImg").src;
Example 6
Add a black border to the first <img> element:
Try it yourself
document.images
Syntax
| Syntax | Description |
|---|---|
| Property | length |
The number of <img> elements in the collection.
| The number of <img> elements in the collection. | Description |
|---|---|
| Methoditem([ |
index Returns the element at the specified index (starting from 0). |
| ]item(namedItem( |
index Returns the element at the specified index (starting from 0). |
| If the index is out of range, returns null.IfnamedItem( |
) If Returns an element with the specified element. If id |
Returns null if it does not exist.
| Type | Description |
|---|---|
| Object |
HTMLCollection object. All <img> elements in the document. is sorted in the order they appear in the source code. |
Browser support
document.images It is a feature of DOM Level 1 (1998).
All browsers support it:
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Support | 9-11 | Support | Support | Support | Support |
- Previous Page head
- Next Page implementation
- Go to Parent Layer HTML DOM Documents
