HTML - DOM 文档 images 属性

HTML DOM document 的 images 集合是一个只读属性，用于返回 HTML 文档中所有 <img> 元素作为集合。

语法

document.images;

属性

属性	描述
length	返回 HTML 文档中 <img> 元素的数量。

方法

下表显示了 DOM images 集合提供的方法列表。集合中的元素已排序，并按其在 HTML 文档中出现的顺序呈现。

方法	描述
[索引]	返回集合中指定索引处的 <img> 元素。索引从 0 开始，如果索引超出范围则返回 null。
item(索引)	返回集合中指定索引处的 <img> 元素。索引从 0 开始，如果索引超出范围则返回 null。与第一种方法类似。
namedItem(id)	返回集合中具有指定 id 的 <img> 元素。如果 id 不存在则返回 null。

返回值

它返回一个 HTMLCollection，其中列出了文档中所有 <img> 元素。

HTML DOM Document 'images' 属性示例

以下示例说明了 images 属性和方法的用法。

获取 <img> 元素的数量

在以下示例中，length 属性用于返回文档中 <img> 元素的数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo">
    <p>Click to get the number of <img> element.</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images.length;
            document.getElementById("images").innerHTML =x;
        }
    </script>
</body>
</html>

获取第一张图片的 URL

在此示例中，我们使用 images [索引] 方法获取第一张图片的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo">
    <p>Click to get the URL of the first image</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images[0].src;
            document.getElementById("images").innerHTML = x;
        }
    </script>
</body>
</html>

获取第二张图片的 URL

在此示例中，我们使用 images item(索引) 方法获取第二张图片的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo">
    <p>Click to get the URL of the second image</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images.item(1).src;
            document.getElementById("images").innerHTML = x;
        }
    </script>
</body>
</html>

获取指定 id 的图片的 URL

以下示例返回具有指定 id 的 <img> 元素的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document images Property
    </title>
</head>
<body>
    <img src="/html/images/test.png" alt="Tutorials Point logo" id="img1">
    <img src="/plsql/images/plsql-mini-logo.jpg" alt="PL/SQL logo" id="img2">
    <p>Click to get the URL of the image with id "img2"</p>
    <button onclick="fun()">Click me</button>
    <p id="images"></p>
    <script>
        function fun() {
            let x = document.images.namedItem("img2").src;
            document.getElementById("images").innerHTML = x;
        }
    </script>
</body>
</html>

支持的浏览器

属性
images	是 1	是 12	是 1	是 1	是 12.1

html_dom_document_reference.htm

打印页面