JavaScript firstChild
last modified April 2, 2025
In this article, we explore the firstChild property in JavaScript.
This property is essential for DOM traversal, allowing developers to access the
first child node of an element.
Basic Definition
The firstChild property returns the first child node of the
specified element. This includes all node types, not just element nodes.
It's important to note that firstChild can return text nodes,
comment nodes, or element nodes. If the element has no children, it returns
null.
Accessing First Child Element
This example demonstrates how to access the first child node of an element.
<!DOCTYPE html>
<html>
<head>
<title>Basic firstChild</title>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<script>
const container = document.getElementById('container');
const firstChild = container.firstChild;
console.log(firstChild);
</script>
</body>
</html>
In this example, we have a div element with two paragraph children. The
JavaScript code retrieves the first child node using firstChild.
Note that in many cases, this might return a text node containing whitespace rather than the first paragraph element. This is because whitespace between tags is considered text nodes.
Using firstElementChild
This example shows how to get the first child element, ignoring text nodes.
<!DOCTYPE html>
<html>
<head>
<title>firstElementChild</title>
</head>
<body>
<ul id="list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<script>
const list = document.getElementById('list');
const firstElement = list.firstElementChild;
console.log(firstElement.textContent);
</script>
</body>
</html>
Here we use firstElementChild instead of firstChild to
directly access the first element child, skipping any text or comment nodes.
This is often more useful when you specifically want to work with element nodes rather than all node types. The output will be "First item".
Checking for Child Nodes
This example demonstrates how to safely check for and access the first child.
<!DOCTYPE html>
<html>
<head>
<title>Checking firstChild</title>
</head>
<body>
<div id="empty"></div>
<div id="content">Some text</div>
<script>
const emptyDiv = document.getElementById('empty');
const contentDiv = document.getElementById('content');
if (emptyDiv.firstChild) {
console.log('Empty div has children');
} else {
console.log('Empty div has no children');
}
if (contentDiv.firstChild) {
console.log('Content:', contentDiv.firstChild.nodeValue);
}
</script>
</body>
</html>
This example shows how to check if an element has any child nodes before
attempting to access firstChild. This prevents errors when working
with potentially empty elements.
The nodeValue property is used to access the text content of text
nodes. For element nodes, this property is null.
Modifying First Child
This example shows how to modify the first child node of an element.
<!DOCTYPE html>
<html>
<head>
<title>Modifying firstChild</title>
</head>
<body>
<div id="modify">
Original text
<p>Paragraph</p>
</div>
<button onclick="changeFirstChild()">Modify</button>
<script>
function changeFirstChild() {
const div = document.getElementById('modify');
const firstChild = div.firstChild;
if (firstChild.nodeType === Node.TEXT_NODE) {
firstChild.nodeValue = 'Modified text ';
}
}
</script>
</body>
</html>
In this example, we have a div with mixed content. The button click handler finds the first child and modifies it if it's a text node.
We check the nodeType to ensure we're working with a text node
before attempting to modify it. This demonstrates type-safe DOM manipulation.
Traversing Child Nodes
This example demonstrates using firstChild in node traversal.
<!DOCTYPE html>
<html>
<head>
<title>Node Traversal</title>
</head>
<body>
<div id="traverse">
<!-- Comment -->
<span>First span</span>
<p>Paragraph</p>
</div>
<button onclick="traverseNodes()">Traverse</button>
<script>
function traverseNodes() {
const div = document.getElementById('traverse');
let currentNode = div.firstChild;
while (currentNode) {
console.log(currentNode.nodeName, currentNode.nodeType);
currentNode = currentNode.nextSibling;
}
}
</script>
</body>
</html>
This example shows how to traverse all child nodes starting from firstChild. Each node's name and type are logged to the console.
The traversal uses nextSibling to move to each subsequent node.
This pattern is useful for examining all nodes within an element.
Source
In this article, we have shown how to use the firstChild property
in JavaScript. This property is fundamental for DOM traversal and node
manipulation in web development.
Author
List all JS DOM tutorials.