JS DOM: NodeList vs HTMLCollection

What is nodelist, htmlcollection

NodeList and HTMLCollection are collection of Nodes. They are returned by many DOM methods.

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

Difference between nodelist vs htmlcollection

HTMLCollection only contains of element type of nodes. (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 node is 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);
}