What is the Difference Between HTMLCollection and NodeList, and How to Obtain Them

In web development, HTMLCollection and NodeList are common DOM object collections used to store multiple DOM elements. Although they seem similar, there are significant differences in behavior and characteristics. Understanding these differences is crucial for efficiently manipulating DOM elements.

1. HTMLCollection

HTMLCollection is a live-updating collection. When the DOM structure changes, HTMLCollection automatically reflects those changes. It only contains element nodes, so it will not store other types of nodes like text or comment nodes.

Features

• Live updating: HTMLCollection automatically updates when the DOM structure changes.
• Multiple access methods: Elements can be accessed by index, length property, or by their id or name attributes.
• Contains only element nodes: Ignores text and comment nodes.

Methods to obtain

• document.getElementsByTagName(tagName): Retrieves a collection of elements by tag name.
• document.getElementsByClassName(className): Retrieves a collection of elements by class name.
• document.forms, document.images, document.links: These also return an HTMLCollection.

1
const divs = document.getElementsByTagName("div"); // Returns an HTMLCollection

2. NodeList

NodeList is a collection that can contain all types of nodes (element, text, comment, etc.). It can be either static (i.e., not updated as the DOM changes) or live, depending on how it is obtained.

Features

• Non-live updating: A NodeList obtained via querySelectorAll is static and does not update automatically.
• Contains all node types: In addition to element nodes, it can store text, comment, and other types of nodes.
• Supports multiple iteration methods: NodeList can be iterated using forEach() (supported in modern browsers).

Methods to obtain

• document.querySelectorAll(selector): Returns a static NodeList.
• document.childNodes: Returns a live NodeList containing all child nodes (elements, text, comments, etc.).
• parentNode.childNodes: Retrieves all child nodes of a node, returning a NodeList.

1
const divs = document.querySelectorAll("div"); // Returns a static NodeList

Key Differences Summary

1. Node Types:

   • HTMLCollection only contains element nodes.
   • NodeList can contain all types of nodes (element, text, comment, etc.).

2. Live Updating:

   • HTMLCollection is live and updates automatically.
   • NodeList obtained via querySelectorAll() is static, while childNodes is live.

3. Iteration Methods:

   • HTMLCollection can be accessed by index but does not support forEach().
   • NodeList supports forEach() and is more flexible for iteration.

Selection Advice

• When you need to manipulate a dynamic DOM structure, HTMLCollection is more suitable as it automatically updates with changes to the DOM.
• If you only need a one-time static collection of elements, NodeList is the better choice, especially the static NodeList obtained via querySelectorAll().

Code Examples

1
// Obtain HTMLCollection
2
let htmlCollection = document.getElementsByClassName("example");
3
console.log(htmlCollection); // A live-updating collection
4

5
// Obtain NodeList
6
let nodeList = document.querySelectorAll(".example");
7
console.log(nodeList); // A static collection
8

9
// Iterate through NodeList
10
nodeList.forEach((element) => {
11
  console.log(element);
12
});

By understanding the differences between HTMLCollection and NodeList, developers can more flexibly manipulate the DOM, improving both code performance and maintainability.