Imagens de documentos HTML DOM
Exemplo
O número de elementos <img> no documento:
document.images.length;
Faça um loop sobre todos os elementos <img> e produza a URL (src) de cada um:
const myImages = document.images;
let text = "";
for (let i = 0; i < myImages.length; i++) {
text += myImages[i].src + "<br>";
}
A URL do primeiro elemento <img> é:
document.images[0].src;
A URL do primeiro elemento <img> é:
document.images.item(0).src;
Mais exemplos abaixo.
Definição e uso
A images
propriedade retorna uma coleção de todos os elementos <img> em um documento.
A images
propriedade retorna um HTMLCollection .
A images
propriedade é somente leitura.
Observação
A images
propriedade não retorna elementos <input> com type="image".
Veja também:
HTMLCollection
Uma HTMLCollection é uma coleção de nós HTML.
Os nós em uma coleção podem ser acessados por números de índice. O índice começa em 0.
A propriedade length retorna o número de elementos na coleção.
Sintaxe
document.images
Propriedades
Property | Description |
length | The number of <img> elements in the collection. |
Métodos
Method | Description |
[index] | Returns the element with the specified index (starts at 0). Returns null if the index is out of range. |
item(index) | Returns the element with the specified index (starts at 0). Returns null if the index is out of range. |
namedItem(id) | Returns the element with the specified id. Returns null if the id does not exist. |
Valor de retorno
Modelo | Descrição |
Objeto | Um objeto HTMLCollection. Todos os elementos <img> no documento. Os elementos são classificados conforme aparecem no documento. |
Mais exemplos
A URL do elemento <img> com id="myImg" é:
document.images.namedItem("myImg").src;
Adicione uma borda preta ao primeiro elemento <img>:
document.images[0].style.border = "10px dotted black";
Suporte ao navegador
document.images
é um recurso DOM Nível 1 (1998).
É totalmente suportado em todos os navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |