JS DOM: NodeList vs HTMLCollection

What is htmlcollection

HTMLCollection is a collection of elements. (Node Type of 1.) it can be HTML elements, but also SVG elements and XML elements.

• it is Array-Like Object.
• it is Iterable Object.

HTMLCollection is always a Live Object.

it is returned by getElementsByTagName() and getElementsByClassName() and element.children and Document collections document.forms, document.images, document.links etc.

• JS DOM: Get Element by ID, Name, Class etc

What is nodelist

NodeList is a list of Nodes.

• it is Array-Like Object.
• it is Iterable Object.

it is returned by

• document.querySelectorAll() → Static
• element.querySelectorAll() → Static
• element.childNodes→ Live
• document.getElementsByName() → Live

• JS DOM: Get Element by ID, Name, Class etc

Difference between nodelist vs htmlcollection

HTMLCollection only contains nodes of element type. (Node Type of ELEMENT_NODE.)

HTMLCollection is always a Live Object.

NodeList may include text node, or Whitespace Nodes, and other Node Type.

NodeList may or may not be Live. e.g.

• document.querySelectorAll returns a NodeList that is non-live .
• document.getElementsByName returns a NodeList that is live.

There's no builtin way to find out whether NodeList is live object.

How to determine nodelist or htmlcollection

/* check if a dom method return HTMLCollection or NodeList */

let xx = document.getElementsByClassName("xx");
console.log(
 Reflect.apply(Object.prototype.toString, xx, []),
);

/*
result is a string, one of
"[object HTMLCollection]"
"[object NodeList]"
*/

• JS: Find Object's sub-type

Check dom node type, array, iterable

// verify about HTMLCollection and NodeList.
// run this in browser console
// 2026-09-24

{
 const xx = document.getElementsByTagName("div");

 console.log(
  Reflect.apply(
   Object.prototype.toString,
   xx,
   [],
  ) === "[object HTMLCollection]",
 );

 console.log(Array.isArray(xx) === false);

 // has forEach
 console.log(Reflect.has(xx, "forEach") === false);

 // is iterable
 console.log(Reflect.has(xx, Symbol.iterator) === true);
}

{
 const yy = document.querySelectorAll("*");

 console.log(
  Reflect.apply(
   Object.prototype.toString,
   yy,
   [],
  ) === "[object NodeList]",
 );

 console.log(Array.isArray(yy) === false);

 // has forEach
 console.log(Reflect.has(yy, "forEach") === true);

 // is iterable
 console.log(Reflect.has(yy, Symbol.iterator) === true);
}