DOM Collections

Working with groups of DOM elements efficiently

📚 What are DOM Collections?

DOM Collections are array-like objects that contain multiple DOM elements. They're returned by methods like getElementsByTagName() and getElementsByClassName(). 


// Get collection of all paragraphs
let paragraphs = document.getElementsByTagName('p');

// Access elements by index
let firstParagraph = paragraphs[0];

Try it:

Paragraph 1

Paragraph 2

Paragraph 3

Types of Collections

🏷️

HTMLCollection

Live collection that updates automatically 

getElementsByTagName()
getElementsByClassName()
📋

NodeList

Can be live or static collection 

querySelectorAll()
childNodes
🔄

Live Collections

Updates when DOM changes 

// Automatically updates
getElementsByClassName('item')
📸

Static Collections

Snapshot that doesn't change 

// Fixed snapshot
querySelectorAll('.item')

🔹 HTMLCollection

HTMLCollection is a live collection of elements: 

// Get collection by tag name
let divs = document.getElementsByTagName('div');

// Get collection by class name
let items = document.getElementsByClassName('item');

// Access elements
console.log(divs[0]); // First div
console.log(divs.length); // Number of divs

// Loop through collection
for(let i = 0; i < divs.length; i++) {
    console.log(divs[i]);
}

Interactive Example:

Item 1
Item 2
Item 3

🔹 NodeList

NodeList can be live or static: 

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

// Live NodeList (childNodes)
let liveNodes = element.childNodes;

// NodeList has forEach method
staticNodes.forEach(function(node) {
    console.log(node.textContent);
});

// Convert to array for more methods
let array = Array.from(staticNodes);

Interactive Example:

Node 1 Node 2 Node 3

🔹 Live vs Static Collections

Understanding the difference: 

// Live HTMLCollection - updates automatically
let liveCollection = document.getElementsByClassName('dynamic');

// Static NodeList - fixed snapshot
let staticCollection = document.querySelectorAll('.dynamic');

console.log('Live:', liveCollection.length);
console.log('Static:', staticCollection.length);

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

// Check lengths again
console.log('Live after adding:', liveCollection.length); // Increased
console.log('Static after adding:', staticCollection.length); // Same

Interactive Example:

Dynamic 1
Dynamic 2

🔹 Converting Collections to Arrays

Convert collections to arrays for more methods: 

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

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

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

// Now you can use array methods
array1.map(element => element.textContent);
array1.filter(element => element.className === 'active');

Interactive Example:

Item A

Item B

Item C

🧠 Test Your Knowledge

Which method returns a live HTMLCollection?