Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to convert a DOM Nodelist to an Array using JavaScript?
To write javascript advanced code you can run across instances where you need to convert a DOM (Document Object Model) NodeList to a more adaptable data structure like an array. Although nodelist is just like an array in any programming language. However, it does not contain fever characteristics than an array.
You can use Javascript to convert a nodelist into an array to work more appropriately.
Example 1
This example provides code to convert a nodelist into an array using javascript. The code uses the nodeListToArray function to perform the conversion.
Algorithm
Step 1 :Create an array in javascript. The array must be empty so we can push in the data in the next steps.
Step 2 :Now add the values contained in the nodelist into the array by using the push() method.
Step 3 :After adding all elements into the array perform the return to process the return of the array.
Step 4 :Use the queryselectorall() method to test all elements is converted in the array.
Step 5 :Check the array in the console to test whether the elements are at the right place and copied in the array.
Example
<!DOCTYPE html>
<html>
<head>
<title>NodeList to Array</title>
</head>
<body>
<h1> Heading 1</h1>
<h1>Heading 2</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
var nodeList = document.querySelectorAll('h1');
var array = Array.from(nodeList);
console.log(array);
});
</script>
</body>
</html>
Example 2
The preceding example is the most basic method of converting a nodelist to an array. In this example, we are going to convert the data into two arrays using two novelists. The conversion method for the second node is the same, except you must build two nodelists and two arrays. In addition, you must execute the log function twice.
Algorithm
Step 1 :Create two arrays in javascript and set the arrays empty so we can copy the data from nodelists.
Step 2 :Now add the values of nodelist 1 in array 1 and nodelist 2 in array 2.
Step 3 :After adding all elements into the arrays return them.
Step 4 :Now run queryselectorall() method twice to test the elements of both nodelists are converted.
Step 5 :Run the code to check the arrays in the console. Now you will get two arrays in the console showing element numbers and elements of each array.
Example
<!DOCTYPE html>
<html>
<head>
<title>Convert DOM NodeList to Array</title>
</head>
<body>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<p>abc</p>
<h1> Heading 1</h1>
<h1>Heading 2</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
var nodeList1 = document.querySelectorAll('h1');
var array1 = Array.from(nodeList1);
var nodeList2 = document.querySelectorAll('p');
var array2 = Array.from(nodeList2);
console.log(array1);
console.log(array2);
});
</script>
</body>
</html>
Conclusion
When working with the DOM, converting a DOM NodeList to an array in JavaScript is a typical procedure. We can simply do this translation by utilizing a simple algorithm and code. In this article, we have converted two nodelists into two arrays. Each nodelist converts distinct sorts of items. Similarly, you may utilize any number of nodelists with any type of data.
The resultant array gives a broader set of array properties, making data manipulation and processing easier. although you can also use some additional methods for making the same conversion, such as Array.from() or the spread operator. However, the method discussed here is the simplest.
213 Views
