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 define the number of nodes in a node list with JavaScript HTML DOM?
In this tutorial, we are going to learn how can we find the number of nodes present in a node list in JavaScript. To perform the specific operation, we need to use the HTML DOM which helps us to work with the object model of the webpage.
Now let us first understand what a node is and what is a node list in HTML. Everything in an HTML document including element, text, attribute as well as the whole document is a node. Every small element present in an HTML document is part of the navigation tree of an HTML DOM.
A node list is nothing just a collection of all the nodes present in an HTML document. It gets returned by the properties such as childNodes and as well as by the methods querySelectorAll().
Syntax
Syntax to define the number of nodes in a node list is given as −
const var_name = document.querySelectorAll("tag_name");
var_name.length
We will now be looking into an example where we will be working with a node list of paragraph nodes.
Approach 1
In this approach, we follow the below steps to define the number of nodes in a node list with JavaScript HTML DOM −
Create a paragraph tag and write some data into it.
Create another paragraph and write some other data in it.
Now create a 3rd paragraph but this time without any data in it just with an id.
Inside the script node create a constant variable named ‘mylist’.
Now call the method document.querySelectorAll() with the p tag inside it.
Create another variable named as a result and call the ‘mylist.length’ property in it.
At the last step print the value of the result variable with some text.
Example
We can use the below code to perform the above task −
<!DOCTYPE html>
<html>
<body>
<h2> Tutorials Point </h2>
<p> First paragraph </p>
<p> Second Paragraph </p>
<p id="third"></p>
<script>
const mylist = document.querySelectorAll("p");
let result = mylist.length;
document.getElementById("third").innerHTML = " This is " + result + "rd paragraph. It means this document have "+result+" paragraphs";
</script>
</body>
</html>
The node list behaves very much like an array, but it is not an array i.e., some of the array properties are valid on it but some does not apply onto it like we can iterate through a node list and can call its values using index number but cannot use the methods like pop, delete or add an element like we use in an array it will through error when used over a node list.
Approach 2
Let’s investigate another approach to define a number of node lists in HTML DOM. Here we will iterate through each element of the node list like an array and print its value.
Steps to iterate through each element of a node list −
Create 3 paragraph tags and write one statement in each of them.
Now create a function inside the script tag and call the method document.querySelectorAll() with the p tag inside it.
Create a for loop inside it looping through the node list using the ‘length’ property.
Now change the color of all the paragraphs using ‘style.color’ property.
At last connect the function created with a button we create in the ‘body’ tag.
Example
We can use the below code to perform above task −
<!DOCTYPE html>
<html>
<body>
<h2> Tutorials Point </h2>
<p> This is first paragraph </p>
<p> This is second paragraph </p>
<p> This is third paragraph </p>
<button onclick="myFunction()"> Press button to change color of paragraph element </button>
<script>
function myFunction() {
const nodelist = document.querySelectorAll("p");
for (let i = 0; i < nodelist.length; i++) {
nodelist[i].style.color = "#29ab00";
}
}
</script>
</body>
</html>
On pressing the above button, the color of all the paragraph tags changes.
So, in this example we are iterating through each element of node list and changing its color accordingly.
The node list is very much like the HTML collection (collection of document elements) as both of them shows some array like behaviour as well both form an array by extracting some data from the document but there are some differences between them as in the HTML collection we can call an element with its name, index or id but in node list we can call an element by using its index number only.
242 Views
To Continue Learning Please Login