Convert NodeList to Array in javascript(examples)

#What is NodeList object in javascript

NodeList is a javascript inbuilt DOM object, that holds a collection of nodes. Node is a single HTML document in a DOM tree.

It represents a collection of document nodes used to select and modify DOM elements.

Array is a collection of plain objects. NodeList represents collections but there are no filter or iterate methods to do manipulation like Array before 2020.

NodeList introduced the forEach method in the 2020 DOM specification. This article includes possible ways of array kind of operation manipulation in Nodelist.

NodeList is readonly, can be iterated, and access the elements, Mutation of nodelist is not supported by the user. Conversion to array is required if we want to modify an novelist.

NodeList is an object returned with the result of document.querySelector() method.

For example, In a form, if you have five input text fields, the document.querySelector(input:text) method is used to select input fields and returns NodeList. Here, the querySelector DOM method selects the elements based on CSS selector classes.

It is difficult to manipulate and iterate nodelist directly, Hence, the developer has to convert nodelist to Array.

There are multiple ways, we can do convert nodelist to array in javascript/es6.

NodeList Iteration can be used in the following use cases.

• MultiSelect dropdown selected elements
• Input elements
• Selecting multiple DIV selectors
• selecting td, tr of HTML tables

Let us declare HTML elements and test each approach on how to iterate the nodelist.

In the following example, a list of items is displayed using the li element.

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
</ul>

#Convert NodeList to Array in Javascript

Let’s explore multiple ways to Convert to an Array.

#Use forEach Inbuilt method

forEach is an inbuilt method in NodeList, that supports all the latest browsers. Old browsers don’t have support for this method.

To iterate in older browsers, use the following approaches.

• Use polyfill
• read other approaches in older browsers

You can find more about NodeList foreach🔗

forEach syntax

NodeList.forEach(callbackfunction) or
NodeList.forEach(function(currentitem, currentindex, nodeListObject) {
  // iteration code
});

forEach function accepts the following arguments.

• the callback function is called for each element and accepts three arguments,
  • current item - current item pointed in the cursor of nodelist
  • current index - current object index, optional
  • nodeListObject - an object list applies to each element for manipulation, optional
• Callback function is a functional expression or arrow functions

const liListNodes = document.querySelectorAll("li");
console.log(liListNodes); // NodeList Array
liListNodes.forEach(function (item, index, newobject) {
  console.log(item);
});

And the output is

NodeList(6) [li, li, li, li, li, li]
<li>​…​</li>
​
<li>​…​</li>
​
<li>​…​</li>
​
<li>​…​</li>
​
<li>​…​</li>
​
<li>​…​</li>
​

#Use ES5 slice

This was the approach used for the ES5 language. The slice method in Array is used to convert a nodelist to an array.

const liListNodes = document.querySelectorAll("li");
var array = Array.prototype.slice.call(liListNodes);
console.log(Array.isArray(array)); // true

#Use ES6 Array examples

ES6 is one of the latest javascript versions.

We can use different features to convert to Array. It works in modern browsers only.

#spread operator

spread operator is the latest addition to es6 latest javascript.

const liListNodes = document.querySelectorAll("li");
const liArray = [...liListNodes];
console.log(Array.isArray(liArray)); // true

Finally, This only works with modern browsers.

#Array from the method

Array.from is a new method released in ES6

It creates an array from a string or an object.

It works with any enumerable object types such as list, string maps

Array.from(object / string);

Using this method, We can convert to the array and In DOM manipulation, document.querySelector(li) is used to select all the elements and returns NodeList.

const liListNodes = document.querySelectorAll("li");
console.log(liListNodes); // NodeList Array input.html:9 NodeList(6) [li, li, li, li, li, li]
console.log(Array.isArray(liListNodes)); // returns false

const liArray = Array.from(liListNodes);
console.log(Array.isArray(liArray)); // returns true