--- title: "Explain the HTML DOM NodeList in JavaScript" description: "here we will learn about the html dom notelist using javascript." author: "Ashutosh Patel" published: 2025-02-17 updated: 2025-02-17 canonical: https://www.mindstick.com/blog/305269/explain-the-html-dom-nodelist-in-javascript category: "javascript" tags: ["javascript", "javascript object"] reading_time: 3 minutes --- # Explain the HTML DOM NodeList in JavaScript A **NodeList** is a [collection](https://www.mindstick.com/articles/1718/collections-in-java) of nodes (which can be [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements), [attributes](https://www.mindstick.com/articles/13105/2-attributes-that-make-your-odoo-ecommerce-theme-productive-and-engaging), or text nodes) in the [Document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool) [Object Model](https://www.mindstick.com/forum/158432/what-is-the-document-object-model-dom-and-how-does-it-relate-to-web-development) (DOM). Unlike an [HTMLCollection](https://www.mindstick.com/articles/338557/explain-the-html-collection-in-javascript), a NodeList can be **static or live**, depending on how it is created. #### How to Get a NodeList? **Using** `document.querySelectorAll()` **(Static NodeList)** - Returns a static **NodeList** of elements that match the CSS selector. - This does not automatically update if the DOM changes. ```html HTML DOM NodeList
Thi is the Div 1.
Thi is the Div 2.
Thi is the Div 3.
``` **Using** `childNodes` **(Live NodeList)** It returns a **live** NodeList of all child nodes (including text and comment nodes). ```html HTML DOM NodeList
Thi is the Div 1.
Thi is the Div 2.
Thi is the Div 3.
``` #### Properties of a NodeList - `.length` – Returns the number of nodes in the list. ```html HTML DOM NodeList

Thi is the Para 1.

Thi is the Div 2.

Thi is the Div 3.

``` - **Accessing nodes using an index** – Similar to an array. ```html HTML DOM NodeList

Thi is the Para 1.

Thi is the Div 2.

Thi is the Div 3.

``` #### Key Features of NodeList There are several key [features](https://www.mindstick.com/articles/12993/5-advanced-features-for-your-odoo-ecommerce-theme) of NodeList are as given below, ## Can Contain Different Node Types Unlike an HTMLCollection, which only contains elements, a NodeList can contain the following, - Element nodes (`
`, `

`, etc.) - Text nodes (line breaks, spaces, etc.) - Comment nodes (``) ## Not Always Live - NodeLists from `querySelectorAll()` are **static** (do not update when the DOM changes). - NodeLists from `childNodes` are **live** (update when the DOM changes). ```javascript let staticList = document.querySelectorAll("p"); // Static let liveList = document.getElementById("container").childNodes; // Live ``` **[Supports](https://www.mindstick.com/blog/12043/how-to-create-a-killer-mobile-app-that-supports-your-brand)** `forEach()` Unlike HTMLCollection, NodeList supports `forEach()` method (for static NodeLists) ```javascript document.querySelectorAll(".item").forEach(item => console.log(item.textContent)); ``` **[Convert](https://www.mindstick.com/forum/2093/configurationmanager-appsettings-convert-n-to-n-why) to an Array (if needed)**: ```javascript let nodesArray = Array.from(document.querySelectorAll(".item")); nodesArray.map(item => console.log(item.textContent)); ``` ## Summary - NodeList can be **live or static**, depending on how it is created. - It supports `forEach()`, unlike HTMLCollection. - If you need [array methods](https://www.mindstick.com/interview/23453/array-methods-function-in-python), convert it using `Array.from()`. - Use `querySelectorAll()` for flexibility and CSS selectors. --- Original Source: https://www.mindstick.com/blog/305269/explain-the-html-dom-nodelist-in-javascript Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.