JavaScript: Convert a NodeList to an array

JavaScript fundamental (ES6 Syntax): Exercise-174 with Solution

Convert NodeList to Array

Write a JavaScript program to convert a NodeList into an array.

• Use spread operator (...) inside new array to convert a NodeList to an array.

Sample Solution:

JavaScript Code:

// Define a function 'nodeListToArray' that takes a DOM NodeList 'nodeList'
const nodeListToArray = nodeList => 
  // Convert the NodeList to an array using the 'slice' method of the 'Array.prototype' object
  // This is achieved by calling 'Array.prototype.slice' with the 'nodeList' as 'this' and no arguments
  Array.prototype.slice.call(nodeList);
// Log the result of converting the child nodes of the document to an array
console.log(nodeListToArray(document.childNodes));

Output:

[{},{}]

Flowchart:

Live Demo:

See the Pen javascript-basic-exercise-174-1 by w3resource (@w3resource) on CodePen.

For more Practice: Solve these Related Problems:

• Write a JavaScript program that converts a NodeList obtained from document.querySelectorAll into an array using Array.from().
• Write a JavaScript function that uses the spread operator to transform a NodeList into a proper array.
• Write a JavaScript program that demonstrates converting a NodeList to an array and then filtering its elements.
• Write a JavaScript function that accepts a NodeList and returns an array of nodes for further processing.

Improve this sample solution and post your code through Disqus

Previous: Write a JavaScript program to get the nth element of an given array.
Next: Write a JavaScript program to get the index of the function in an array of functions which executed the fastest.