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

列印頁面