HTML - DOM NodeList forEach() Method

Quiz

HTML DOM nodelist forEach() method calls the callback function mentioned in parameter once for each value pair in the list in the order of their insertion.

Syntax

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

Parameter

It accepts five parameters out of which two are required and three are optional parameters.

Parameter	Description
callback	It is a required parameter. It represents a function to be executed on each element of nodelist. It accepts three parameters.
currentValue	It is a required parameter. It represents current node in nodelist.
currentIndex	It is an optioal parameter. It represents index of the currentValue in nodelist.
listObj	It is an optioal parameter. It represents the nodelist on which forEach() method is being applied to.
thisArg	It is an optioal parameter. It represents value to use as this while executing callback function.

Return value

It does not return anything.

Examples of HTML DOM Nodelist 'forEach()' Method

The following examples illustrates implementation of forEach() method.

Get all Child Nodes

The following example returns all the child nodes of the parent node.

<!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>

Get Child Nodes of body Tag

The following example returns all the child nodes of the <body> element.

<!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>

Supported Browsers

Method
forEach()	Yes 51	Yes 16	Yes 50	Yes 10	Yes 38

html_dom.htm

Print Page