There are 3 ways to convert NodeList or HTMLCollection to an Array in JavaScript.

1. Array.from()
2. Spread syntax
3. Array.prototype.slice.call()

What are a NodeList and HTMLCollection?

When selecting element on the page, with .querySelectorAll():

const paragraphs = document.querySelectorAll('p')

it will return all paragraph elements on the page as a NodeList.

The NodeList is a collection of DOM nodes that has similar to an Array appearance and structure.

You can, however, select element via other ways like all form elements or all forms in the document via document.forms:

document.forms

This property will return all form elements on the page and the result will be an HTMLCollection. The HTMLCollection returns a collection of HTML elements it also has an array-like structure.

So what’s the problem?

Both NodeList and HTMLCollection are collections and they might look like an Array and even possess some properties and methods inherent to arrays, they’re still not actual arrays.

This means if you’re willing to use Array methods like .map(), .filter(), .sort() on your NodeLists and HTMLCollections then you’ll need to convert them into an actual Array.

1. Array.from()

Array.from() method will create a new Array instance from an array-like or iterable object. So it can be used both on NodeList and HTMLCollection.

const paragraphs = document.querySelectorAll('p') // NodeList
const paragraphsArray = Array.from(paragraphs)

paragraphsArray // Will output an Array

const documentForms = document.forms // HTMLCollection
const documentFormsArray = Array.from(documentForms)

documentFormsArray // Will output an Array

This is a clear and straightforward method to create an Array, and not only from NodeList or HTMLCollection.

Browser Support: All major browsers except IE.

2. Spread syntax

Spread syntax allows an iterable such as an array expression or string to be expanded
—MDN

In the case of NodeList or HTMLCollection, the Spread syntax has to be used inside square brackets to spread iterable into a new Array.

const paragraphs = document.querySelectorAll('p') // NodeList
const paragraphsArray = [...paragraphs]

paragraphsArray // Will output an Array

const documentForms = document.forms // HTMLCollection
const documentFormsArray = [...documentForms]

documentFormsArray // Will output an Array

This approach is useful when joining arrays.

Browser Support: All major browsers except IE.

3. Array.prototype.slice.call()

This is the old school method, when modern features like the ones above weren’t available.

What this piece of code does is it takes the .slice() method from Array prototype and then invokes this method by binding it to the object (in our case NodeList or HTMLCollection) via .call() method.

The .slice() method will:

return a shallow copy of a portion of an array into a new array object selected from begin to end
—MDN

But since no arguments passed it will return the full array.

const paragraphs = document.querySelectorAll('p') // NodeList
const paragraphsArray = Array.prototype.slice.call(paragraphs)

paragraphsArray // Will output an Array

const documentForms = document.forms // HTMLCollection
const documentFormsArray = Array.prototype.slice.call(documentForms)

documentFormsArray // Will output an Array

Also just to shorten up a bit you can use the [].slice.call() syntax instead.

Browser Support: All major browsers.