JavaScript childNodes
last modified April 2, 2025
In this article, we explore the childNodes property in JavaScript.
This property is essential for DOM traversal, allowing developers to access all
child nodes of an element, including text nodes and comment nodes.
Basic Definition
The childNodes property returns a NodeList of child nodes of the
given element. Unlike children, it includes all node types, not
just element nodes.
The NodeList is a live collection, meaning it automatically updates when child nodes are added or removed. Nodes are indexed starting from 0, similar to arrays.
Basic childNodes Example
This example demonstrates how to access child nodes of a simple div element.
<!DOCTYPE html>
<html>
<head>
<title>Basic childNodes</title>
</head>
<body>
<div id="parent">
<p>First paragraph</p>
Text content
<!-- Comment node -->
<p>Second paragraph</p>
</div>
<script>
const parent = document.getElementById('parent');
const nodes = parent.childNodes;
console.log('Total child nodes:', nodes.length);
nodes.forEach((node, index) => {
console.log(`Node ${index}:`, node);
});
</script>
</body>
</html>
In this example, we have a div with various child nodes. The JavaScript code
retrieves all child nodes using childNodes and logs them to the
console.
The output shows that childNodes includes element nodes, text nodes,
and comment nodes. This demonstrates its comprehensive nature compared to
children which only returns element nodes.
Filtering Element Nodes
This example shows how to filter only element nodes from the childNodes collection.
<!DOCTYPE html>
<html>
<head>
<title>Filtering Element Nodes</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const allNodes = list.childNodes;
const elementNodes = Array.from(allNodes).filter(
node => node.nodeType === Node.ELEMENT_NODE
);
console.log('All nodes:', allNodes.length);
console.log('Element nodes:', elementNodes.length);
elementNodes.forEach(node => {
console.log(node.textContent);
});
</script>
</body>
</html>
Here we have an unordered list with three items. The code first gets all child nodes, then filters them to include only element nodes (nodeType 1).
This demonstrates how to work with specific node types from the childNodes
collection. The nodeType property helps identify different types
of nodes in the DOM.
Counting Text Nodes
This example demonstrates how to count and work with text nodes in childNodes.
<!DOCTYPE html>
<html>
<head>
<title>Counting Text Nodes</title>
</head>
<body>
<div id="container">
Some text
<p>Paragraph</p>
More text
<span>Span element</span>
Final text
</div>
<script>
const container = document.getElementById('container');
const textNodes = Array.from(container.childNodes).filter(
node => node.nodeType === Node.TEXT_NODE &&
node.textContent.trim() !== ''
);
console.log('Text nodes found:', textNodes.length);
textNodes.forEach((node, index) => {
console.log(`Text node ${index + 1}:`, node.textContent.trim());
});
</script>
</body>
</html>
In this example, we have a div with mixed content including text nodes and element nodes. The code filters out empty text nodes and counts the remaining.
This shows how to handle text nodes specifically, which are often overlooked but can be important for precise DOM manipulation and content analysis.
Modifying Child Nodes
This example shows how to modify child nodes after accessing them.
<!DOCTYPE html>
<html>
<head>
<title>Modifying Child Nodes</title>
</head>
<body>
<div id="content">
<p class="item">Original text 1</p>
<p class="item">Original text 2</p>
<p class="item">Original text 3</p>
</div>
<button onclick="modifyNodes()">Modify Nodes</button>
<script>
function modifyNodes() {
const content = document.getElementById('content');
const nodes = content.childNodes;
Array.from(nodes).forEach((node, index) => {
if (node.nodeType === Node.ELEMENT_NODE) {
node.textContent = `Modified text ${index + 1}`;
node.style.color = 'red';
}
});
}
</script>
</body>
</html>
Here we have a div with paragraph elements and a button. When clicked, the button modifies both the text content and style of each element node.
This demonstrates practical use of childNodes for batch modifications
of DOM elements. The example also shows how to safely handle only element nodes.
Checking for Child Nodes
This example demonstrates how to check if an element has child nodes.
<!DOCTYPE html>
<html>
<head>
<title>Checking for Child Nodes</title>
</head>
<body>
<div id="parent1">
<p>Child paragraph</p>
</div>
<div id="parent2"></div>
<script>
const parent1 = document.getElementById('parent1');
const parent2 = document.getElementById('parent2');
console.log('Parent1 has child nodes:', parent1.hasChildNodes());
console.log('Parent2 has child nodes:', parent2.hasChildNodes());
if (parent1.hasChildNodes()) {
console.log('Parent1 first child:', parent1.firstChild);
}
</script>
</body>
</html>
In this example, we have two div elements - one with content and one empty.
The code checks each for child nodes using hasChildNodes().
This shows how to safely check for child nodes before attempting to access them.
The firstChild property is also demonstrated for accessing the first
node directly.
Source
In this article, we have shown how to use the childNodes property
in JavaScript. This property is fundamental for DOM traversal and manipulation
in web development.
Author
List all JS DOM tutorials.