JavaScript firstElementChild
last modified April 2, 2025
In this article, we explore the firstElementChild property in
JavaScript. This property is essential for DOM traversal, allowing developers
to access the first child element node of a specified parent element.
Basic Definition
The firstElementChild property returns the first child element of
the specified element. Unlike firstChild, it only considers element
nodes, ignoring text and comment nodes.
This property is read-only and returns null if the parent element
has no child elements. It's part of the Element interface and is widely
supported in modern browsers.
Basic firstElementChild
This example demonstrates how to access the first child element of a div.
<!DOCTYPE html>
<html>
<head>
<title>Basic firstElementChild</title>
</head>
<body>
<div id="parent">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
<script>
const parent = document.getElementById('parent');
const firstChild = parent.firstElementChild;
console.log(firstChild.textContent);
</script>
</body>
</html>
In this basic example, we have a div element with two paragraph children. The
JavaScript code retrieves the first child element using
firstElementChild and logs its text content.
This demonstrates the fundamental usage of firstElementChild to
access the first element node. The property ignores any text nodes or comments
that might appear before the first element.
firstElementChild vs firstChild
This example shows the difference between firstElementChild and firstChild.
<!DOCTYPE html>
<html>
<head>
<title>firstElementChild vs firstChild</title>
</head>
<body>
<div id="container">
<!-- This is a comment -->
<p>Only child element</p>
</div>
<script>
const container = document.getElementById('container');
console.log('firstChild:', container.firstChild);
console.log('firstElementChild:', container.firstElementChild);
</script>
</body>
</html>
Here we have a div with a comment node before its paragraph child. The script
shows how firstChild returns the comment node while
firstElementChild skips it and returns the paragraph.
This highlights the key difference between these properties when dealing with
mixed content. firstElementChild is often more useful for DOM
traversal as it ignores non-element nodes.
Checking for Child Elements
This example demonstrates how to check if an element has any child elements.
<!DOCTYPE html>
<html>
<head>
<title>Checking for Child Elements</title>
</head>
<body>
<div id="hasChildren">
<span>Child element</span>
</div>
<div id="noChildren"></div>
<script>
const hasChildren = document.getElementById('hasChildren');
const noChildren = document.getElementById('noChildren');
console.log('hasChildren:', hasChildren.firstElementChild !== null);
console.log('noChildren:', noChildren.firstElementChild !== null);
</script>
</body>
</html>
In this example, we check two divs - one with a child element and one without.
By comparing firstElementChild to null, we can determine if child
elements exist.
This technique is useful for conditional logic based on DOM structure. It's more reliable than checking childNodes.length when you only care about element nodes.
Modifying the First Child
This example shows how to modify the first child element of a parent.
<!DOCTYPE html>
<html>
<head>
<title>Modifying First Child</title>
</head>
<body>
<ul id="list">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<button onclick="highlightFirst()">Highlight First</button>
<script>
function highlightFirst() {
const list = document.getElementById('list');
const firstItem = list.firstElementChild;
firstItem.style.backgroundColor = 'yellow';
firstItem.style.fontWeight = 'bold';
}
</script>
</body>
</html>
Here we have an unordered list and a button. When clicked, the button finds the
first list item using firstElementChild and applies styling to it.
This demonstrates practical use of firstElementChild for DOM
manipulation. The property provides direct access to the first child element
for modification without needing to filter through other node types.
Chaining firstElementChild
This example demonstrates chaining multiple firstElementChild calls.
<!DOCTYPE html>
<html>
<head>
<title>Chaining firstElementChild</title>
</head>
<body>
<div id="grandparent">
<div>
<p>Nested paragraph</p>
</div>
</div>
<script>
const grandparent = document.getElementById('grandparent');
const nestedPara = grandparent.firstElementChild.firstElementChild;
console.log(nestedPara.textContent);
</script>
</body>
</html>
In this example, we chain two firstElementChild calls to access a
deeply nested paragraph. The first call gets the child div, the second gets the
paragraph.
This shows how firstElementChild can be used in sequence to traverse
multiple levels of the DOM tree. It's important to check for null at each step
when working with potentially empty elements.
Source
MDN firstElementChild Documentation
In this article, we have shown how to use firstElementChild in
JavaScript. This property is fundamental for DOM traversal and element selection
in web development.
Author
List all JS DOM tutorials.