Convert NodeList to Array in javascript with examples

NodeList is a javascript inbuilt DOM object, holds collection HTML document nodes. 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 forEach method in 2020 DOM specification. This article includes possible ways of array kind of operation manipulation in Nodelist.

NodeList object in javascript

NodeList is an object returned with 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>

forEach Inbuilt method

forEach is an inbuilt method in NodeList introduced in all the latest browsers in 2020. 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
});

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

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>​

ES5 Nodelist conversion using a slice

This was approach used for the ES5 language slice method is used to convert nodelist to an array

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

ES6 nodelist Array examples

In the latest javascript. the following approaches 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 create an array from a string or an object. This was introduced in ES6.

from method introduced in ES6, works with any object with either length or iteration exists on it.

Array.from(object/string)

It is a simple way of converting to the array and, It works only latest browsers In DOM manipulation, document.querySelector(li) used to select all the elements and returns NodeList.

This

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