DOM Collections
In JavaScript, when you access multiple elements from the DOM (like all <p> tags or all elements with a specific class), they are often returned as a DOM Collection — a special type of array-like object that represents multiple DOM nodes.
DOM collections allow you to loop through, access, and manipulate multiple elements in the document.
What is a DOM Collection?
A DOM Collection is an array-like list of nodes (elements) returned by DOM methods such as:
document.getElementsByTagName()document.getElementsByClassName()document.imagesdocument.formsdocument.linksdocument.scriptselement.children
These collections are not true arrays, but array-like objects — meaning:
- You can access items using index numbers (e.g.,
collection[0]) - You can check the length (
collection.length) - But you can’t directly use array methods like
.map(),.filter(), etc.
Types of DOM Collections
There are two major types of DOM collections:
HTMLCollection
A live collection of elements — it updates automatically when the DOM changes.
An HTMLCollection is returned by methods like:
document.getElementsByTagName()document.getElementsByClassName()document.formselement.children
Example:
<!DOCTYPE html>
<html>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paras = document.getElementsByTagName("p");
console.log(paras); // HTMLCollection(3)
console.log(paras[0].innerHTML); // Paragraph 1
console.log(paras.length); // 3
</script>
</body>
</html>
HTMLCollection Example (Live Behavior)
<ul id="list">
<li>Apple</li>
<li>Banana</li>
</ul>
<script>
const items = document.getElementsByTagName("li");
console.log(items.length); // 2
// Add a new list item
const newItem = document.createElement("li");
newItem.textContent = "Cherry";
document.getElementById("list").appendChild(newItem);
console.log(items.length); // 3 Automatically updated
</script>
NodeList
A collection of nodes — it can be live or static, depending on how it’s created.
A NodeList is returned by:
document.querySelectorAll()childNodesdocument.getElementsByName()
Example:
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const nodeList = document.querySelectorAll("p");
console.log(nodeList); // NodeList(3)
console.log(nodeList[0].textContent); // Paragraph 1
</script>
NodeList Example (Static Behavior)
<ul id="list">
<li>Dog</li>
<li>Cat</li>
</ul>
<script>
const items = document.querySelectorAll("li");
console.log(items.length); // 2
// Add a new <li> dynamically
const newItem = document.createElement("li");
newItem.textContent = "Bird";
document.getElementById("list").appendChild(newItem);
console.log(items.length); // 2 Not updated (static NodeList)
</script>
Difference Between HTMLCollection & NodeList
| Feature | HTMLCollection | NodeList |
|---|---|---|
| Returned by | getElementsByTagName, getElementsByClassName | querySelectorAll, childNodes |
| Contains | Only element nodes | Can include text, comment, or element nodes |
| Live / Static | Live | Usually Static |
| forEach() Support | No | Yes |
| Updates with DOM changes | Yes | No (unless live NodeList) |
Looping Through DOM Collections
Using a for loop
const paras = document.getElementsByTagName("p");
for (let i = 0; i < paras.length; i++) {
console.log(paras[i].innerText);
}
Using for...of
for (let element of document.querySelectorAll("p")) {
console.log(element.textContent);
}
Using forEach() (NodeList only)
document.querySelectorAll("p").forEach((p) => {
p.style.color = "blue";
});
Converting a Collection to an Array
Because collections are array-like, not real arrays —
you can convert them to use array methods like map, filter, etc.
Using Array.from()
const divs = document.getElementsByTagName("div");
const divArray = Array.from(divs);
divArray.forEach(div => div.style.background = "yellow");
Using Spread Operator
const items = [...document.querySelectorAll("li")];
items.map(item => console.log(item.textContent));
Common DOM Collections
| Property | Description |
|---|---|
document.images | Collection of all <img> elements |
document.forms | Collection of all <form> elements |
document.links | Collection of all <a> elements with href |
document.scripts | Collection of all <script> elements |
element.children | HTMLCollection of child elements (no text nodes) |
element.childNodes | NodeList of all child nodes (includes text/comments) |
Example:
console.log(document.forms.length); // Number of forms
console.log(document.images[0].src); // First image source