La proprietà document.images di Javascript

La proprietà document.images è una proprietà di sola lettura dell'oggetto document in JavaScript, che mi fornisce una lista di tutte le immagini presenti nel documento corrente.

Quando il browser carica una pagina web, crea un oggetto img per ogni immagine presente nel documento e li memorizza in una collezione di immagini sotto forma di array. La collezione di immagini è accessibile tramite la proprietà "images" dell'oggetto "document".

La proprietà images restituisce una collezione di oggetti di tipo HTMLImageElement in un array-like.

Ogni elemento della collezione rappresenta un elemento <img> nel documento ed è accessibile indicando la sua posizione nell'indice numerico come in un array.

Nota. Se la pagina web non ha immagini, la proprietà images restituisce un array vuoto.

Ad esempio, per accedere alla prima immagine nella pagina web, utilizzo questa sintassi

document.images[0]

Per accedere alla seconda immagine, indico la posizione 1 nell'array

document.images[1]

Vale la pena ricordare che l'indice degli array in Javascript comincia da zero. Quindi, il primo elemento occupa la posizione 0, il secondo elemento la posizione 1, e via dicendo.

Se voglio sapere quante immagini sono presenti nella pagina web, mi basta utilizzare il metodo length

document.images.length

Volendo posso accedere alle immagini della collezione anche per nome, usando la proprietà document.images['name'].

document.images['name']

Dove il nome non è il nome del file dell'immagine ma il valore dell'attributo "name" nell'elemento <img> all'interno della pagina HTML.

Ad esempio, se una immagine ha l'attributo name="logo"

<img alt=”home page” name=”logo” src=”image1.gif” />

Posso trovarla nella proprietà images usando questa sintassi

document.images['logo']

In alcuni casi è utile assegnare a una variabile il riferimento di un immagine img della collezione.

Ad esempio, questo codice assegna la prima immagine alla variabile "myImage1" e la seconda immagine alla variabile "myImage2".

var myImage1 = document.images[0];
var myImage2 = document.images[1];

In questo caso è più facile elaborarla, senza dovermi ricordare ogni volta la sua posizione nell'indice dell'array.

Infine, per accedere alle URL delle immagine devo utilizzare la proprietà src.

1. let images = document.images;
2. for (let i = 0; i < images.length; i++) {
3. console.log(images[i].src);
4. }

Questo codice stampa l'URL di tutte le immagini presenti nella pagina.

E così via.