Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Using querySelectorAll() to Count Nodes
In this approach, we follow the below steps to define the number of nodes in a node list with JavaScript HTML DOM ?
Create paragraph tags and write some data into them.
Use
document.querySelectorAll()to select all paragraph elements.Access the
lengthproperty to get the count.Display the result in the HTML document.
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.
Iterating Through Node List Elements
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.colorproperty.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.
Node List vs HTML Collection
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.
| Feature | Node List | HTML Collection |
|---|---|---|
| Access by index | Yes | Yes |
| Access by name/id | No | Yes |
| Live updates | No (static) | Yes (live) |
| forEach method | Yes | No |
Conclusion
Use the length property of node lists to count elements selected by querySelectorAll(). Node lists behave like arrays but are not true arrays, supporting iteration but not array methods like push or pop.
664 Views
