JavaScript DOM NodeList

❮ Prev Next ❯

In Javascript NodeList is a collection of nodes returned by various DOM methods, such as querySelectorAll(), childNodesand getElementsByTagName().

This collection represents a list of nodes that can be accessed and manipulated programmatically.

This chapter explores the characteristics of NodeList, its properties, methods, and how to work with it effectively in JavaScript.

Characteristics of NodeList

A NodeListis an array-like object that contains a collection of nodes. It represents a list of nodes in the order they appear in the DOM tree.

NodeList is not an actual array but can be iterated using array methods like forEach(), map()and filter(). 

// Example of accessing NodeList returned by querySelectorAll
const nodeList = document.querySelectorAll(".example");

// Iterating over the NodeList using forEach
nodeList.forEach((node) => console.log(node));

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="container">
      <p class="example">This is first Paragraphs</p>
      <p class="example">This is second Paragraphs</p>
      <p class="example">This is third Paragraphs</p>
    </div>
  <script>
    // Example of accessing NodeList returned by querySelectorAll
    const nodeList = document.querySelectorAll(".example");
    
    // Iterating over the NodeList using forEach
    nodeList.forEach((node) => console.log(node));
  </script>
  </body>
</html>

Properties of NodeList

NodeListobjects have properties that provide information about the collection.

The most commonly used properties include length , which returns the number of nodes in the list, and numerical indices to access individual nodes. 

// Accessing properties of NodeList
const nodeList = document.querySelectorAll(".example");

console.log(nodeList.length); // Outputs the number of nodes in the NodeList
console.log(nodeList[0]); // Accesses the first node in the NodeList

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="container">
      <p class="example">This is first Paragraphs</p>
      <p class="example">This is second Paragraphs</p>
      <p class="example">This is third Paragraphs</p>
    </div>
  <script>
    // Accessing properties of NodeList
    const nodeList = document.querySelectorAll(".example");
    
    console.log(nodeList.length); // Outputs the number of nodes in the NodeList
    console.log(nodeList[0]); // Accesses the first node in the NodeList
  </script>
  </body>
</html>

Methods for NodeList

While NodeListdoes not have many built-in methods, it can be converted to an array using Array.from() or the spread operator (...).

Once converted to an array, you can use array methods like forEach(), map(), filter()and reduce(). 

// Accessing properties of NodeList
const nodeList = document.querySelectorAll(".example");
const nodeArray = Array.from(nodeList);

// Using array methods on the converted array
nodeList.forEach((node) => console.log(node));
const nodeTexts = nodeArray.map(node => node.textContent);
console.log(nodeTexts);

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="container">
      <p class="example">This is first Paragraphs</p>
      <p class="example">This is second Paragraphs</p>
      <p class="example">This is third Paragraphs</p>
    </div>
  <script>
    // Accessing properties of NodeList
    const nodeList = document.querySelectorAll(".example");
    const nodeArray = Array.from(nodeList);
    
    // Using array methods on the converted array
    nodeList.forEach((node) => console.log(node));
    const nodeTexts = nodeArray.map(node => node.textContent);
    console.log(nodeTexts); 
  </script>
  </body>
</html>

Live vs. Static NodeList

NodeListobjects can be either live or static.

A live NodeListis automatically updated to reflect changes in the DOM, while a static NodeList remains unchanged after its creation. 

// Creating a live NodeList using querySelectorAll 
// Creating a live HTMLCollection using getElementsByClassName
const staticNodeList = document.getElementsByClassName("example");

// Creating a static NodeList using querySelectorAll
const liveNodeList = document.querySelectorAll(".example");

// Adding a new element
const newElement = document.createElement("p");
newElement.className = "example";
newElement.textContent = "This is a new paragraph";
document.body.appendChild(newElement);

console.log(liveNodeList.length); // Outputs updated length
console.log(staticNodeList.length); // Outputs original length

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="container">
      <p class="example">This is first Paragraphs</p>
      <p class="example">This is second Paragraphs</p>
      <p class="example">This is third Paragraphs</p>
    </div>
  <script>
    // Creating a live HTMLCollection using getElementsByClassName
    const staticNodeList = document.getElementsByClassName("example");
    
    // Creating a static NodeList using querySelectorAll
    const liveNodeList = document.querySelectorAll(".example");
    
    // Adding a new element
    const newElement = document.createElement("p");
    newElement.className = "example";
    newElement.textContent = "This is a new paragraph";
    document.body.appendChild(newElement);
    
    console.log(liveNodeList.length); // Outputs updated length
    console.log(staticNodeList.length); // Outputs original length
  </script>
  </body>
</html>

Iterating and Manipulating NodeList

NodeList objects can be iterated using loops, array methods, or the forEach() method directly.

You can also manipulate multiple elements in a NodeListsimultaneously by applying changes within a loop or using array methods. 

// Iterating over NodeList using forEach
const nodeList = document.querySelectorAll(".example");
nodeList.forEach((node) => console.log(node));

// Manipulating multiple elements in NodeList
nodeList.forEach(node => node.style.color = "red");

Example 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
  </head>
  <body>
    <h1 id="heading">Welcome to CodingKoleji</h1>
    <div id="container">
      <p class="example">This is first Paragraphs</p>
      <p class="example">This is second Paragraphs</p>
      <p class="example">This is third Paragraphs</p>
    </div>
  <script>
    // Iterating over NodeList using forEach
    const nodeList = document.querySelectorAll(".example");
    nodeList.forEach((node) => console.log(node));
    
    // Manipulating multiple elements in NodeList
    nodeList.forEach(node => node.style.color = "red");
  </script>
  </body>
</html>

Understanding NodeList is essential for efficiently working with collections of nodes in JavaScript.

Whether accessing nodes returned by DOM methods, manipulating them, or iterating over them, knowing how to leverage the properties, methods, and characteristics of NodeList is crucial for building dynamic and interactive web applications.

Let's learn about how to handle error using try and catch in the next chapter.

❮ Prev Next ❯