-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
A NodeList in JavaScript is a collection of nodes returned by methods like querySelectorAll
or childNodes
. Unlike an individual DOM element, a NodeList allows you to access multiple nodes at once.
NodeLists can be static or live, and they are often used for iterating over multiple elements to apply changes dynamically.
Feature | NodeList | HTMLCollection |
---|---|---|
Node Types | Elements, text, comment nodes | Elements only |
Live or Static | Can be static or live | Always live |
Looping | forEach , for , for…of |
for or convert to array |
Creation | querySelectorAll , childNodes |
getElementsByTagName , children |
NodeList is more versatile because it can contain any node type.
HTMLCollection is limited to element nodes.
let nodeList = document.querySelectorAll("p"); // Static NodeList
console.log(nodeList); // Logs all <p> elements
// Access the first paragraph
console.log(nodeList[0]);
// Access the last paragraph
console.log(nodeList[nodeList.length - 1]);
NodeLists are array-like, meaning you can use indexing but not all array methods without conversion.
Returned by methods like querySelectorAll
, does not update automatically when the DOM changes.
let paragraphs = document.querySelectorAll("p");
let newP = document.createElement("p");
newP.textContent = "New Paragraph";
document.body.appendChild(newP);
console.log(paragraphs.length); // Original count, does not include newP
Returned by properties like childNodes
, updates automatically when the DOM changes.
let childNodes = document.body.childNodes;
let newDiv = document.createElement("div");
document.body.appendChild(newDiv);
console.log(childNodes.length); // Includes newDiv automatically
for
looplet paragraphs = document.querySelectorAll("p");
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.color = "blue"; // Change text color
}
for…of
loopfor (let para of paragraphs) {
para.style.backgroundColor = "#f0f0f0"; // Change background
}
forEach
(for NodeList only)paragraphs.forEach((para, index) => {
para.textContent = `Paragraph ${index + 1}`; // Update text
});
Unlike HTMLCollections, NodeLists support
forEach
directly, which makes iteration convenient.
Sometimes you need full array functionality, like map
, filter
, or reduce
.
let nodeList = document.querySelectorAll("li");
let nodeArray = Array.from(nodeList);
nodeArray.map(li => {
li.style.fontWeight = "bold";
});
Array.from()
converts the NodeList into a real array.
Useful when performing advanced array operations on multiple elements.
Each node in a NodeList has standard node properties:
let nodeList = document.querySelectorAll("p");
nodeList.forEach(node => {
console.log("Node Name:", node.nodeName); // e.g., P
console.log("Node Type:", node.nodeType); // 1 = element node
console.log("Parent Node:", node.parentNode); // Parent element
});
nodeName
– Returns the tag name or #text
for text nodes.
nodeType
– Returns numeric code indicating type.
parentNode
– Returns the parent element.
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
let menuItems = document.querySelectorAll(".menu li"); // NodeList
menuItems.forEach((item, index) => {
item.style.padding = "10px";
item.style.cursor = "pointer";
// Highlight every second item
if (index % 2 !== 0) {
item.style.backgroundColor = "#e0e0e0";
}
});
NodeList allows batch processing of multiple elements.
Easy to apply styles, classes, or content updates.
NodeLists are often read-only, meaning you cannot directly modify the list. Instead, modify the DOM elements themselves:
let nodeList = document.querySelectorAll("p");
// Add a new paragraph
let newPara = document.createElement("p");
newPara.textContent = "I am new!";
document.body.appendChild(newPara);
// The NodeList does not include newPara (static NodeList)
console.log(nodeList.length); // Original count
Use live NodeLists (childNodes
) if you need automatic updates.
Use querySelectorAll
for static NodeLists for predictable behavior.
Convert NodeLists to arrays when using array methods.
Use forEach
or for…of
for clean iteration.
Understand whether your NodeList is static or live to avoid unexpected bugs.
Use NodeLists for batch operations on multiple elements for performance and cleaner code.
DOM NodeLists are collections of nodes that allow you to access and manipulate multiple elements. Key points:
Can contain element, text, and comment nodes.
Can be static (querySelectorAll) or live (childNodes).
Supports looping with for, for…of, or forEach.
Can be converted to arrays for advanced operations.
Essential for dynamic, interactive web applications that manipulate multiple elements efficiently.
Mastering NodeLists enables you to work with multiple DOM elements at once, apply batch updates, and write cleaner, more efficient JavaScript.
How can you select all <p>
elements on a page using querySelectorAll
and change their text color to red?
Write a loop to iterate through all <li>
items in a menu using forEach
and add 10px padding to each.
How can you convert a NodeList of all <div>
elements into an array and change their background color?
How would you select all headings (h1
and h2
) and append (Updated)
to their text content?
How can you access the first and last nodes in a NodeList and make their font weight bold?
Write code to loop through all buttons in a NodeList and attach a click event that logs their text content.
How can you select all elements with the class .item
and toggle a CSS class on each using a for…of
loop?
Using childNodes
, how would you loop through all child nodes of a container and log their node types?
How can you select all <input>
elements in a form using a NodeList and reset their values to empty?
If you create a new <p>
element and append it to the body, will it appear in a static NodeList obtained earlier using querySelectorAll("p")
? Explain why.
JS Basics
JS Variables & Operators
JS Data Types & Conversion
JS Numbers & Math
JS Strings
JS Dates
JS Arrays
JS Control Flow
JS Loops & Iteration
JS Functions
JS Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts