Convert NodeList to Array in javascript with examples
- Admin
- Sep 20, 2023
- Javascript Es6
NodeList
is a javascript inbuilt DOM object, that holds a collection of 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 the forEach
method in the 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 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>
forEach Inbuilt method to convert NodeList to Array in Javascript
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>
β
convert NodeList to Array in Javascript using an ES5 slice
This was approach used for the ES5 language
The slice
method 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
convert NodeList to Array using ES6 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 that 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)
is 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