DOM Node Lists

Master working with NodeList collections in JavaScript

📝 What are DOM Node Lists?

NodeList is a collection of nodes returned by methods like querySelectorAll() and childNodes. Unlike arrays, NodeLists have limited methods but can be iterated. 


// Get NodeList of all divs
let nodeList = document.querySelectorAll('div');

// Access by index
let firstDiv = nodeList[0];

// Get length
console.log(nodeList.length);

Try it:

Div 1
Div 2
Div 3

NodeList Features

🔢

Index Access

Access nodes by index like arrays 

nodeList[0] // First node
nodeList[1] // Second node
📏

Length Property

Get the number of nodes 

nodeList.length
🔄

forEach Method

Iterate through nodes easily 

nodeList.forEach(node => {
  console.log(node);
});
🎯

entries() Method

Get index and value pairs 

for(let [index, node] of nodeList.entries()) {
  console.log(index, node);
}

🔹 Creating NodeLists

Different ways to get NodeLists: 

// Static NodeList from querySelectorAll
let staticNodes = document.querySelectorAll('.item');

// Live NodeList from childNodes
let liveNodes = element.childNodes;

// NodeList from getElementsByName
let nameNodes = document.getElementsByName('username');

// All nodes include text nodes and comments
let allChildren = element.childNodes;

// Only element nodes
let elementChildren = element.children; // HTMLCollection

Interactive Example:

Item 1

Item 2

Item 3

🔹 Iterating NodeLists

Multiple ways to loop through NodeLists: 

let nodes = document.querySelectorAll('.item');

// Method 1: forEach (recommended)
nodes.forEach(function(node, index) {
    console.log(index, node.textContent);
});

// Method 2: for loop
for(let i = 0; i < nodes.length; i++) {
    console.log(nodes[i]);
}

// Method 3: for...of loop
for(let node of nodes) {
    console.log(node);
}

// Method 4: for...in loop (not recommended)
for(let index in nodes) {
    console.log(nodes[index]);
}

Interactive Example:

A B C D

🔹 NodeList Methods

Available methods on NodeList: 

let nodes = document.querySelectorAll('.item');

// forEach - iterate through nodes
nodes.forEach((node, index) => {
    node.style.color = 'blue';
});

// entries() - get [index, node] pairs
for(let [index, node] of nodes.entries()) {
    console.log(`Node ${index}:`, node.textContent);
}

// keys() - get indices
for(let index of nodes.keys()) {
    console.log('Index:', index);
}

// values() - get nodes
for(let node of nodes.values()) {
    console.log('Node:', node.textContent);
}

Interactive Example:

Method Item 1
Method Item 2
Method Item 3

🔹 Converting NodeList to Array

Convert NodeList to array for more methods: 

let nodeList = document.querySelectorAll('.item');

// Method 1: Array.from()
let array1 = Array.from(nodeList);

// Method 2: Spread operator
let array2 = [...nodeList];

// Method 3: Array.prototype.slice.call()
let array3 = Array.prototype.slice.call(nodeList);

// Now use array methods
let texts = array1.map(node => node.textContent);
let filtered = array1.filter(node => node.classList.contains('active'));
let found = array1.find(node => node.id === 'target');

Interactive Example:

Active Item

Regular Item

Another Active

🔹 Live vs Static NodeLists

Understanding the difference: 

// Static NodeList - doesn't update
let staticList = document.querySelectorAll('.dynamic');

// Live NodeList - updates automatically  
let liveList = document.getElementById('container').childNodes;

console.log('Static:', staticList.length);
console.log('Live:', liveList.length);

// Add new element
let newElement = document.createElement('div');
newElement.className = 'dynamic';
document.getElementById('container').appendChild(newElement);

// Check again
console.log('Static after:', staticList.length); // Same
console.log('Live after:', liveList.length); // Increased

Interactive Example:

Dynamic 1
Dynamic 2

🧠 Test Your Knowledge

Which method returns a static NodeList?