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