Convert NodeList to Array in javascript with examples

NodeList is an javascript inbuilt DOM object, holds collection html document nodes. It represents collection of documents nodes used to select and modify DOM elements.

Array is 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

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

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

It is very difficult to manipulate and iteration nodelist directly, Hence developer has to convert nodelist to Array.

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

NodeList Iteration can be used in 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 how to iterate nodelist

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

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

forEach Inbulit method

forEach is a inbuilt method in NodeList introduced in all latest browsers in 2020. Old browsers don’t have supports for this method.

To iterate in older browsers, use following approaches

• Use polyfill
• read other approaches in older browsers

You can find more about (NodeList foreach)[https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach] forEach syntax

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

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 slice

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

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

ES6 nodelist Array examples

In latest javascript, the following approaches are used to convert to Array. This will only works moder browsers.

spread operator

(spread operator)[https://www.cloudhadoop.com/2018/08/es6-spread-operator-in-javascript.html] is 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 method

Array.from create an array from an string or an object. This was introduced in

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

Array.from(object/string)

This is simple way of converting to array, however, 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