JavaScript NodeList
- Introduction to HTML DOM Nodes
-
JavaScript
NodeListObject -
Static vs Live
NodeListObjects -
Operations on
NodeListObject
HTML DOM stands for Document Object Model which is an interface for HTML documents. It treats every web page or document as a tree structure consisting of a collection of nodes.
In simple words, a node is an object of the web document. These nodes are placed in a DOM document hierarchically.
In addition, they might have parent and children nodes.
Introduction to HTML DOM Nodes
Let’s assume we have an HTML page, as shown in the following.
<!DOCTYPE html>
<html>
<head>
<!-- This is the page head -->
<title>DOM Node Example</title>
</head>
<body>
<!-- This is the page body -->
<h2>DOM Node Demo</h2>
<p id="body-content">This article is about DOM NodeList.</p>
</body>
</html>
The above HTML page is interpreted as a tree structure by the browser. Hence, it might look like the following.
|-doctype: html
|-HTML
-|HEAD
-|TITLE
-|text: DOM Node Example
-|BODY
-|comment: This is the page body
-|H2
-|text: DOM Node Demo
-|P id="body-content"
-|text: This article is about DOM NodeList.
Each HTML tag is a DOM node, but nodes are not limited to HTML tags. Even the HTML texts and comments are considered DOM nodes.
Hence, the HTML nodes and elements are two different things where the HTML elements are a sub-type of DOM nodes.
JavaScript NodeList Object
As the name suggests, a NodeList object is a collection of DOM nodes. It is very similar to the HTMLCollection object with minor differences; like HTMLCollection object can be accessed with the name and ID, but the NodeList objects only support index-based access.
Furthermore, the HTMLCollection contains the Node.ELEMENT_NODE type nodes only. The NodeList objects can hold different types of nodes, such as attribute nodes, text nodes, and comment nodes, including element nodes.
There are two types of NodeList objects, live and static, which will be discussed in the following section.
Static vs Live NodeList Objects
There childNodes property in the document object returns a NodeList object which we called as a live NodeList. Because this object is affected by the DOM modifications automatically.
Let’s use the browser console to access the HTML mentioned above document using JavaScript, as shown in the following.
const bodyContent = document.getElementById('body-content');
var nodeListForBody = bodyContent.childNodes;
console.log(nodeListForBody);
Output:
As expected, the NodeList object has been returned by the childNodes property. Let’s check the length of the nodeListForBody object.
console.log(nodeListForBody.length);
Output:
Let’s append a new child element to the paragraph element, as shown in the following.
bodyContent.appendChild(document.createElement('div'));
Then, we will check the length of the NodeList nodeListForBody as shown in the following.
console.log(nodeListForBody.length);
Output:
Since the DOM modification has changed the length of the nodeListForBody, it is a live NodeList object.
In contrast to the live NodeList objects, the static NodeList don’t get affected by the DOM modifications. Usually, the document.querySelectorAll() method returns a static NodeList object.
Operations on NodeList Object
A NodeList is not an array. We can loop a NodeList by its index, which is similar to a JavaScript array, but it doesn’t support any of the array operations such as pop(), push() and join().
Let’s access the first node of the above NodeList: nodeListForBody by its index 0.
console.log(nodeListForBody[0]);
Output:
A NodeList can easily convert into a typical JavaScript array using the Array.from() method.
const nodeListAsArray = Array.from(nodeListForBody)
console.log(nodeListAsArray);
Output:
As expected the above NodeList nodeListForBody has been converted to an array nodeListAsArray.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.