NodeList vs HTMLCollection
Understand the differences between element collections.
NodeList vs HTMLCollection is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Two Collection Types
DOM methods return one of two list-like objects: a NodeList or an HTMLCollection. They look similar but differ in important ways.
Where NodeList Comes From
querySelectorAll and childNodes return NodeList objects. The one from querySelectorAll is static: a snapshot taken at query time.
const items = document.querySelectorAll(".item"); // static NodeListWhere HTMLCollection Comes From
getElementsByClassName, getElementsByTagName, and the children property return live HTMLCollection objects.
const items = document.getElementsByClassName("item"); // live HTMLCollectionStatic vs Live
A static NodeList keeps its original contents even if the DOM changes. A live HTMLCollection automatically reflects additions and removals.
const liveList = document.getElementsByClassName("item");
const staticList = document.querySelectorAll(".item");
// add a new .item later:
// liveList.length increases, staticList.length does notforEach Support
NodeList has a built-in forEach. HTMLCollection does not, so you must convert it or use an index loop.
document.querySelectorAll(".item").forEach((el) => {
console.log(el.textContent);
});Neither Is a Real Array
Both are array-like: they have length and index access, but lack map, filter, and reduce.
const list = document.querySelectorAll(".item");
// list.map is undefinedConverting with Array.from
Array.from turns either collection into a real array, unlocking all array methods.
const arr = Array.from(document.querySelectorAll(".item"));
const texts = arr.map((el) => el.textContent);Converting with Spread
The spread operator is a concise alternative that also produces a real array.
const arr = [...document.getElementsByClassName("item")];
const visible = arr.filter((el) => !el.hidden);The Live-List Loop Trap
Removing elements while iterating a live HTMLCollection shifts indexes and skips items. Convert to an array first to iterate safely.
const items = [...document.getElementsByClassName("done")];
items.forEach((el) => el.remove()); // safeIndexing Both
Both support numeric indexing and length, so basic access looks identical even though their underlying behavior differs.
const a = document.querySelectorAll(".item");
const b = document.getElementsByClassName("item");
console.log(a[0], b[0], a.length, b.length);Choosing the Right One
Use querySelectorAll when you want a stable snapshot and forEach built in. Use the live collections when you specifically need the list to stay in sync with the DOM.
Quick Check
Spot the difference.
Recap
NodeList (from querySelectorAll) is static and has forEach; HTMLCollection (from getElementsByClassName, getElementsByTagName, children) is live and lacks forEach. Neither is a real array; use Array.from or spread to convert before using map/filter/reduce, and to iterate safely while mutating.
Frequently asked questions
Is the “NodeList vs HTMLCollection” lesson free?
Yes — the full text of “NodeList vs HTMLCollection” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “NodeList vs HTMLCollection”?
Understand the differences between element collections. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “NodeList vs HTMLCollection” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.