HTML - DOM NodeList 的 forEach() 方法

HTML DOM nodelist 的 **forEach()** 方法会按照列表中插入顺序对列表中的每个值对调用参数中提到的回调函数一次。

语法

nodelist.forEach(callback(currentValue, currentIndex, listObj), thisArg);

参数

它接受五个参数，其中两个是必需参数，三个是可选参数。

参数	描述
callback	这是必需参数。它表示要对 nodelist 的每个元素执行的函数。它接受三个参数。
currentValue	这是必需参数。它表示 nodelist 中的当前节点。
currentIndex	这是一个可选参数。它表示 currentValue 在 nodelist 中的索引。
listObj	这是一个可选参数。它表示正在应用 forEach() 方法的 nodelist。
thisArg	这是一个可选参数。它表示在执行回调函数时用作 this 的值。

返回值

它不返回任何值。

HTML DOM NodeList 'forEach()' 方法示例

以下示例说明了 **forEach()** 方法的实现。

获取所有子节点

以下示例返回父节点的所有子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Nodelist forEach() Method</title>
</head>
<body>
    <p>Click to get the child nodes:</p>
    <button onclick="fun()">Click me</button>
    <p id="entry"></p>
    <script>
        function fun() {
            let x = document.getElementById("entry");
            let nodes = document.createElement("section");
            let nodeOne = document.createElement("h1");
            let nodeTwo = document.createElement("p");
            let nodeThree = document.createElement("h2");
            let nodeFour = document.createElement("span");
            nodes.appendChild(nodeOne);
            nodes.appendChild(nodeTwo);
            nodes.appendChild(nodeThree);
            nodes.appendChild(nodeFour);
            let elelist = nodes.childNodes;
            elelist.forEach(
                function (currentValue, currentIndex, listObj) {
                    x.innerHTML += currentValue.localName + "<br>";
                });
        }
    </script>
</body>
</html>

获取 body 标签的子节点

以下示例返回 <body> 元素的所有子节点。

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Nodelist forEach() Method</title>
</head>
<body>
    <p>I am para 1</p>
    <p>I am para 2</p>
    <h1>random text</h1>
    <p id="forEach"></p>
    <script>
        let x = document.body.childNodes;
        let text = "";
        x.forEach(
            function (currentValue, currentIndex) {
                text += currentIndex + " " + currentValue + "<br>";
            });
        document.getElementById("forEach").innerHTML = text;
    </script>
</body>
</html>

支持的浏览器

方法
forEach()	支持 51	支持 16	支持 50	支持 10	支持 38

打印页面