Convert Node List to Array in JavaScript

Learn how to convert a NodeList object to an Array in this no-B.S. tutorial.

Published Categorized as JavaScript

The NodeList object in JavaScript is an array-like list of nodes (namely, element nodes, attribute nodes, and text odes) extracted from an HTML document.

If you use the querySelectorAll() method—which most JavaScript developers do quite often—or reference the childNodes property of an object, then the results will be returned to you in a NodeList object.

A NodeList looks like an Array, and it behaves like an Array… to an extent. For example, you can iterate on the nodes in a NodeList using the forEach() method, just like you can do with the elements of an Array.

But your options for manipulating the data stored in a NodeList object are limited. You can’t use the map(), slice(), and filter() methods, and if you need to, it may make sense to convert the NodeList to an Array.

So let’s take a look at how you can do that.

How to Convert a NodeList to an Array

Using the Array.from() Method

One way to convert a NodeList to an Array is by using the Array.from() method.

The code snippet below creates an Array titled myList from all hyperlinks (that is, <a> elements) on an HTML page:

const myList = Array.from(document.querySelectorAll('a'));

The nodes will be stored in a flat Array object:

Screenshot from developer console

Using the Array Constructor

Another way to convert a NodeList to an Array is by using the Array constructor.

The code snippet below shows you how:

const myList = new Array(document.querySelectorAll('a'));

The nodes will be stored in a nested Array object:

Screenshot from developer console

The Difference Between Array.from() and Array Constructor

Technically, there is none.

Per the specification for the ECMAScript language:

When Array is called as a function rather than as a constructor, it creates and initialises a new Array object. Thus the function call Array(…) is equivalent to the object creation expression new Array(…) with the same arguments.

ECMAScript Language Specification, Section 15.4.1

Aside from one returning a flat array and the other a nested array object, the two methods are generally interchangeable.

By Dim Nikov

Editor of Maker's Aid. Part programmer, part marketer. Making things on the web and helping others do the same since the 2000s. Yes, I had Friendster and Myspace.

Leave a comment

Your email address will not be published. Required fields are marked *