Difference Between Static and Live Collections

When working with the DOM, we often retrieve a group of HTML elements for manipulation using JavaScript, such as:

document.getElementsByClassName("item");
document.querySelectorAll(".item");

These two methods may look similar, but they return different types of collections. The key distinction is whether the collection automatically reflects changes to the DOM.

What is a Live Collection?

#

A Live Collection updates automatically when the DOM changes (e.g., when elements are added or removed).

Common Methods Returning Live Collections:

#

• getElementsByClassName()
• getElementsByTagName()
• element.children

Return Type:

#

• HTMLCollection (does not support .forEach() directly—you need to convert it to an array)

Characteristics:

#

• Stays synchronized with the DOM
• Avoids repeated DOM queries, saving performance

What is a Static Collection?

#

A Static Collection is a snapshot of the DOM at the time of the query. Later changes to the DOM do not affect the collection.

Common Methods Returning Static Collections:

#

• querySelectorAll()
• element.childNodes

Return Type:

#

• NodeList (supports .forEach() natively)

Characteristics:

#

• One-time result; does not auto-update
• More predictable and stable—ideal for use in loops and logic-based processing

Example: Demonstrating the Difference

#

const liveList = document.getElementsByTagName("li");     // Live
const staticList = document.querySelectorAll("li");       // Static

console.log(liveList.length);    // 2
console.log(staticList.length); // 2

// Add a new <li>
const newLi = document.createElement("li");
document.querySelector("ul").appendChild(newLi);

console.log(liveList.length);    // ✅ Updated to 3
console.log(staticList.length); // ❌ Still 2

When to Use Live Collections?

#

When to Use Static Collections?

#