Loop through childNodes

javascript loops children
user3828771 picture user3828771 · Jul 16, 2014 · Viewed 113k times · Source

I'm trying to loop through childNodes like this:

var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

However, it output Uncaught TypeError: undefined is not a function due to forEach function. I also try to use children instead of childNodes but nothing changed.

Does anybody know what's going on?

Answer

GillesC picture GillesC · Jul 16, 2014

The variable children is a NodeList instance and NodeLists are not true Array and therefore they do not inherit the forEach method.

Also some browsers actually support it nodeList.forEach

ES5

You can use slice from Array to convert the NodeList into a proper Array.

var array = Array.prototype.slice.call(children);

You could also simply use call to invoke forEach and pass it the NodeList as context.

[].forEach.call(children, function(child) {});

ES6

You can use the from method to convert your NodeList into an Array.

var array = Array.from(children);

Or you can also use the spread syntax ... like so

let array = [ ...children ];

A hack that can be used is NodeList.prototype.forEach = Array.prototype.forEach and you can then use forEach with any NodeList without having to convert them each time.

NodeList.prototype.forEach = Array.prototype.forEach
var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

See A comprehensive dive into NodeLists, Arrays, converting NodeLists and understanding the DOM for a good explanation and other ways to do it.

Related questions

How do I make this loop all children recursively?

I have the following: for (var i = 0; i < children.length; i++){ if(hasClass(children[i], "lbExclude")){ children[i].parentNode.removeChild(children[i]); } }; I would like it to loop through all children's children, etc (not just the top level). I …

Read More
For-each over an array in JavaScript

How can I loop through all the entries in an array using JavaScript? I thought it was something like this: forEach(instance in theArray) Where theArray is my array, but this seems to be incorrect.

Read More
Loop through an array in JavaScript

In Java you can use a for loop to traverse objects in an array as follows: String[] myStringArray = {"Hello", "World"}; for (String s : myStringArray) { // Do something } Can you do the same in JavaScript?

Read More