HTML - DOM HTMLCollection length 屬性

HTML DOM HTMLCollection 的 **length** 屬性返回 HTMLCollection 中元素的數量。這是一個只讀屬性，也是一個非常有用的屬性，因為它在使用迴圈時可以作為迭代器。

語法

HTMLCollection.length;

返回值

它返回一個數字，表示 HTMLCollection 中元素的數量。

HTML DOM HTMLCollection 'length' 屬性示例

以下是一些說明 length 屬性用法的示例。

統計元素數量

以下示例返回文件中存在的 'h1' 元素的數量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM HTMLCollection length Property</title>
</head>
<body>
    <h1>This is a learning domain</h1>
    <h1>Welcome to Tutorials Point</h1>
    <h1>Welcome to Tutorix</h1>
    <p>Click below to get the number of 'h1' elements</p>
    <button onclick="fun()">Click me</button>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.getElementsByTagName("h1").length;
            document.getElementById("type").innerHTML =
                "Number of 'h1' elements :" + x;
        }
    </script>
</body>
</html>

更改背景顏色

在以下示例中，length 屬性用作迭代器來更改類名為 'change' 的元素的背景顏色。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>DOM HTMLCollection length Property</title>
</head>
<body>
    <p>Click below to change background color of p element with class name = change</p>
    <button onclick="fun()">Click me</button>
    <P class="change">This is a learning domain</p>
    <p>Welcome to Tutorials Point</p>
    <p class="change">Welcome to Tutorix</p>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.getElementsByClassName("change");
            for (let i = 0; i < x.length; i++) {
                x[i].style.backgroundColor = "#04af2f";
            }
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
length	是 1	是 12	是 1	是 1	是 12.1

html_dom_htmlcollection_reference.htm

列印頁面