HTML - DOM NodeList length 属性

HTML DOM Nodelist 的 **length** 属性是一个只读属性，它返回节点列表中的项目数。

语法

nodelist.length;

返回值

它返回一个整数，表示节点列表中的项目数。

HTML DOM Nodelist 'length' 属性的示例

以下是一些说明 length 属性用法的示例。

计算 body 中子元素的数量

以下示例返回 <body> 中子元素的数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist 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 'body' elements</p>
    <button onclick="fun()">Click me</button>
    <p id="type"></p>
    <script>
        function fun() {
            let x = document.body.childNodes.length;
            document.getElementById("type").innerHTML =
                "Number of 'body' elements :" + x;
        }
    </script>
</body>
</html>

计算 Section 元素的子元素数量

以下示例返回 <section> 中子元素的数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist length Property</title>
</head>
<body>
    <section id="sec">
        <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 elements in
        <section>
            </p>
        </section>
        <button onclick="fun()">Click me</button>
        <p id="type"></p>
        <script>
            function fun() {
                let x = document.getElementById("sec").childNodes.length;
                document.getElementById("type").innerHTML = "Number of elements in section :" + x;
            }
        </script>
</body>
</html>

计算 h1 元素的数量

以下示例返回文档中使用的 h1 元素的数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist 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 属性循环遍历节点以更改所需元素的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist 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

打印页面