目录

HTML DOM 文档 img

示例

文档中 <img> 元素的数量:

document.images.length;
亲自试一试 »

循环遍历所有 <img> 元素,并输出每个元素的 URL (src):

const myImages = document.images;
let text = "";
for (let i = 0; i < myImages.length; i++) {
  text += myImages[i].src + "<br>";
}
亲自试一试 »

第一个 <img> 元素的 URL 是:

document.images[0].src;
亲自试一试 »

第一个 <img> 元素的 URL 是:

document.images.item(0).src;
亲自试一试 »

下面有更多示例。


描述

这个images属性返回文档中所有 <img> 元素的集合。

这个images属性返回一个HTML集合

这个images属性是只读的。

笔记

这个images属性不返回 type="image" 的 <input> 元素。

也可以看看:

图片对象

HTML <img> 标签

HTML 图片教程


HTML集合

一个HTML集合是 HTML 元素的类似数组的集合(列表)。

集合中的元素可以通过索引(从 0 开始)访问。

长度属性返回集合中元素的数量。


语法

document.images

特性

Property Description
length The number of <img> elements in the collection.

方法

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.

返回值

类型 描述
对象 HTMLCollection 对象。
文档中的所有 <img> 元素。
元素按照它们在文档中出现的方式进行排序。


更多示例

id="myImg" 的 <img> 元素的 URL 为:

document.images.namedItem("myImg").src;
亲自试一试 »

向第一个 <img> 元素添加黑色边框:

document.images[0].style.border = "10px dotted black";
亲自试一试 »

浏览器支持

document.images是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11