Skip to content
Related Articles
Open in App
Not now

Related Articles

HTML DOM NodeList.forEach() Method

Improve Article
Save Article
  • Last Updated : 11 Jul, 2022
Improve Article
Save Article

The forEach() method of the NodeList interface calls the callback given in parameter once for each value pair in the list, in insertion order.

Syntax:

NodeList.forEach(callback, currentValue);

Parameters:

  • Callback: A function to execute on each element of NodeList. It accepts 3 parameters:
  • currentValue: The current element to be processed in NodeList.
  • currentIndex (Optional): The index of the currentValue being processed in NodeList.
  • listobj (Optional): The NodeList on which forEach() is being applied.
  • thisArg (Optional): Value to use as this when executing callback.

Return value: This method returns undefined.

Example: In this example, we will create a NodeList and hence will get all values from NodeList using this method.

html




<!DOCTYPE HTML>
<html
<head>
    <meta charset="UTF-8">
    <title>HTML | DOM NodeList.forEach() Method</title>
</head>  
 
<body style="text-align:center;">
    <h1 style="color:green;"> 
     GeeksforGeeks
    </h1>
    <p>
HTML | DOM NodeList.forEach() Method
    </p>
 
    <button onclick = "Geeks()">
    Click Here
    </button>
    <p id="a"></p>
    <script>
        var a = document.getElementById("a");
        a.innerHTML = "elements are : "
        function Geeks(){
           var parentNode = document.createElement("div");
            var c1 = document.createElement("p");
            var c2 = document.createElement("span");
            var c3 = document.createElement("h1");
            parentNode.appendChild(c1);
            parentNode.appendChild(c2);
            parentNode.appendChild(c3);
            var nodelist = parentNode.childNodes;
 
           nodelist.forEach(
            function(currentValue, currentIndex, listObj) {
            a.innerHTML += "<li>"+currentValue.localName + `</li>`;
                console.log(currentValue, currentIndex);
              },
            );
}
</script>
</body>  
</html>

Output:

Before Clicking Button:

After Clicking Button: Elements are called using forEach().

In the console: Element Values can be seen.

Supported Browsers:

  • Google Chrome 51 and above
  • Edge 16 and above
  • Firefox 50 and above
  • Safari 10 and above
  • Opera 38 and above
  • Internet Explorer Not Supported

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!