Make node list into an array

coltborg

Colt Borg

Posted on December 15, 2019

Make node list into an array

Most of the time when I'm coding with node lists, I want to iterate through each of them and preform some action. My first thought is, "Node lists are _like_ arrays, I should be able to use the array methods like .map() or .filter() right?" 🤔

But every time it backfires because Node lists are actually objects.

const nodeArray = document.querySelectorAll('p');

nodeArray.map(node =\> console.log(node); // ❗️TypeError: nodeArray.map is not a function

To quickly fix this, I could either use the .forEach() method instead of .map().

const nodeArray = document.querySelectorAll('p');

nodeArray.forEach(node =\> console.log(node); // ✅ That works!

Or I could quickly turn the node list into an array using the spread operator.

const nodeArray = document.querySelectorAll('p');
const realArray = [...nodeArray];

realArray.map(node =\> console.log(node);
// ✅ That works!
💖 💪 🙅 🚩
coltborg
Colt Borg

Posted on December 15, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related