A NodeList is a collection of nodes (which can be elements, attributes, or text nodes) in the Document Object Model (DOM). Unlike an HTMLCollection, 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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>HTML DOM NodeList</title>
</head>
<body>
<div class="item">Thi is the Div 1.</div>
<div class="item">Thi is the Div 2.</div>
<div class="item">Thi is the Div 3.</div>
<script type="text/javascript">
let items = document.querySelectorAll(".item");
console.log(items); // NodeList of all elements with class "item"
</script>
</body>
</html>
Using childNodes (Live NodeList)
It returns a live NodeList of all child nodes (including text and comment nodes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>HTML DOM NodeList</title>
</head>
<body>
<div id="container">
<div class="item">Thi is the Div 1.</div>
<div class="item">Thi is the Div 2.</div>
<div class="item">Thi is the Div 3.</div>
</div>
<script type="text/javascript">
let parent = document.getElementById("container");
let nodes = parent.childNodes;
console.log(nodes); // NodeList of all child nodes (text, elements, etc.)
</script>
</body>
</html>
Properties of a NodeList
.length– Returns the number of nodes in the list.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>HTML DOM NodeList</title>
</head>
<body>
<div id="container">
<p class="item">Thi is the Para 1.</p>
<p class="item">Thi is the Div 2.</p>
<p class="item">Thi is the Div 3.</p>
</div>
<script type="text/javascript">
console.log(document.querySelectorAll("p").length);
</script>
</body>
</html>
- Accessing nodes using an index – Similar to an array.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>HTML DOM NodeList</title>
</head>
<body>
<div id="container">
<p class="item">Thi is the Para 1.</p>
<p class="item">Thi is the Div 2.</p>
<p class="item">Thi is the Div 3.</p>
</div>
<script type="text/javascript">
let firstItem = document.querySelectorAll(".item")[0];
console.log(firstItem);
</script>
</body>
</html>
Key Features of NodeList
There are several key features 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 (
<div>,<p>, etc.) - Text nodes (line breaks, spaces, etc.)
- Comment nodes (
<!-- Comment -->)
Not Always Live
- NodeLists from
querySelectorAll()are static (do not update when the DOM changes). - NodeLists from
childNodesare live (update when the DOM changes).
let staticList = document.querySelectorAll("p"); // Static
let liveList = document.getElementById("container").childNodes; // Live
Supports forEach()
Unlike HTMLCollection, NodeList supports forEach() method (for static NodeLists)
document.querySelectorAll(".item").forEach(item => console.log(item.textContent));
Convert to an Array (if needed):
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, convert it using
Array.from(). - Use
querySelectorAll()for flexibility and CSS selectors.
Leave Comment