Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

HTML DOM NodeList.forEach() Method

  • Last Updated : 24 Jul, 2020

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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.




<!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
  • Edge
  • Firefox
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :