HTMLCollection vs NodeList in DOM: A JavaScript Guide

Introduction When working with the DOM in JavaScript, you’ll often retrieve groups of elements or nodes . Two of the most common of them you’ll meet are HTMLCollection and NodeList . They look similar at first glance — both are array-like — but they behave differently in important ways. Neither is a true JavaScript Array , so they don’t have all the usual array methods. Knowing exactly what each one is, how to get it, and where they differ will save you hours of debugging. This short guide covers everything you need. What is an HTMLCollection? An HTMLCollection is a live collection that contains only elements nodes (no content nodes, no comments nodes etc.). It is not an array . You can access items by index or name, but it has no modern array methods like forEach, map, filter, etc . How to get an HTMLCollection document . getElementsByTagName ( ' p ' ) document . getElementsByClassName ( ' highlight ' ) element . children document . forms document . images // ...and several other lega