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;"> neveropen </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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
