HTML Collections

By the end of this lesson, you will be able to select groups of elements with HTML Collections, understand their array-like behavior, and choose when to use them instead of NodeList or arrays.

What it is

An HTML Collection is an array-like object that represents a group of elements in the DOM. It is returned by methods such as document.getElementsByClassName(), document.getElementsByTagName(), and element.children. It has a length property and numeric indexes, but it is not a real JavaScript array.

The mental model is a live list of matching elements. If the page changes, the collection usually changes too. Related terms include NodeList, querySelectorAll(), Array.from(), and the spread operator.

Why it matters

• It gives quick access to groups of elements without writing a loop over the whole DOM.
• It is useful for class-based selection, such as highlighting all elements with class="card".
• It supports indexed access, so you can read or update one element at a time.
• It helps you understand why some DOM results behave like arrays but do not have array methods.

Syntax or steps

The smallest useful pattern is:

const items = document.getElementsByClassName("x");
console.log(items.length);
console.log(items[0]);

Steps: choose a collection method, store the result, use length and indexes to inspect it, and convert it to an array only when you need methods like map() or filter().

Example

const list = document.createElement("ul");
list.className = "items";

for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.className = "item";
  item.textContent = "Item " + (i + 1);
  list.appendChild(item);
}

document.body.appendChild(list);

const items = document.getElementsByClassName("item");
console.log(items.length);

for (let i = 0; i < items.length; i++) {
  items[i].style.color = "blue";
}

const itemArray = Array.from(items);
itemArray.forEach((item) => {
  console.log(item.textContent);
});

Part by part: the code creates three list items and adds them to the page. document.getElementsByClassName("item") returns an HTML Collection of those three elements. The first loop uses indexes to change each item's color. The second part converts the collection to a real array so forEach() can be used. Expected output: 3, then Item 1, Item 2, and Item 3.

Common mistakes

• Calling array methods directly. items.map() fails because an HTML Collection is not an array. Fix it with Array.from(items).map().
• Assuming the collection is static. Live collections update when elements are added or removed. If you remove elements while looping, you may skip items. Fix it by making a snapshot first.
• Confusing HTML Collections with NodeLists. querySelectorAll() returns a NodeList, not an HTML Collection. Both are array-like, but their behavior and source methods differ.
• Forgetting that an empty collection is not null. If no elements match, length is 0. Check items.length before using items[0].

When to use it

Use HTML Collections when you need a live, element-only group returned by older DOM methods or children. Use querySelectorAll() when you need CSS selectors or a stable snapshot. Use an array when you need functional iteration.

Practice

Guided exercise: Create a page with three buttons that have class="btn". Select them with document.getElementsByClassName("btn"), log the length, and add class="active" to the first button. Expected result: the console logs 3, and the first button gets the active class.

Challenge: Convert the collection to an array and use filter() to keep only buttons whose text includes "Save". Expected output: an array containing only the matching button elements.

Quick check

Question: Why might document.getElementsByClassName("x") change after you add a new element with class x?

Answer: Because it returns a live HTML Collection, so it reflects current matching elements in the document.

Summary

HTML Collections are convenient array-like groups of DOM elements, especially for class and tag selection. They are powerful for indexed access, but they are not arrays and are often live. Convert them to arrays when you need modern iteration methods.