NodeList vs HTMLCollection
Understand the differences between element collections.
NodeList vs HTMLCollection is a free JavaScript Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
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.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “NodeList vs HTMLCollection” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “NodeList vs HTMLCollection”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
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.
All lessons in this course
- Selecting Elements with querySelector
- getElementById and getElementsByClassName
- Traversing Parents, Children and Siblings
- NodeList vs HTMLCollection