Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
First and last child node of a specific node in JavaScript?
In JavaScript, you can access the first and last child nodes of any DOM element using built-in properties. There are four key properties: firstChild, lastChild, firstElementChild, and lastElementChild.
Key Differences
The main difference between these properties is how they handle whitespace and text nodes:
-
firstChildandlastChildreturn any node, including text nodes (whitespace) and comments -
firstElementChildandlastElementChildreturn only HTML element nodes, ignoring whitespace and comments
Syntax
// First child properties element.firstChild // Returns any node (including text/whitespace) element.firstElementChild // Returns only element nodes // Last child properties element.lastChild // Returns any node (including text/whitespace) element.lastElementChild // Returns only element nodes
Example: Getting First Child Nodes
This example demonstrates the difference between firstChild and firstElementChild:
<!DOCTYPE html>
<html>
<head>
<title>First Child Node Example</title>
</head>
<body>
<h2>First Child Node Comparison</h2>
<ul id="car-list">
<li>BMW</li>
<li>AUDI</li>
<li>RANGE ROVER</li>
</ul>
<ul id="mobile-list"><li>iPhone</li><li>Samsung</li><li>OnePlus</li></ul>
<p id="result"></p>
<script>
const carList = document.getElementById('car-list');
const mobileList = document.getElementById('mobile-list');
// firstChild may return whitespace/text node
const firstChild = carList.firstChild;
console.log('First child type:', firstChild.nodeType); // 3 = text node
// firstElementChild returns the actual element
const firstElementChild = carList.firstElementChild;
console.log('First element child:', firstElementChild.innerHTML); // BMW
// Compare with list without whitespace
const mobileFirst = mobileList.firstElementChild;
document.getElementById('result').innerHTML =
'Car list first element: ' + firstElementChild.innerHTML + '<br>' +
'Mobile list first element: ' + mobileFirst.innerHTML;
</script>
</body>
</html>
First child type: 3 First element child: BMW Car list first element: BMW Mobile list first element: iPhone
Example: Getting Last Child Nodes
This example shows how to access the last child nodes:
<!DOCTYPE html>
<html>
<head>
<title>Last Child Node Example</title>
</head>
<body>
<h2>Last Child Node Comparison</h2>
<ul id="fruit-list">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<div id="colors"><span>Red</span><span>Blue</span><span>Green</span></div>
<p id="last-result"></p>
<script>
const fruitList = document.getElementById('fruit-list');
const colorsDiv = document.getElementById('colors');
// Get last element children
const lastFruit = fruitList.lastElementChild;
const lastColor = colorsDiv.lastElementChild;
console.log('Last fruit:', lastFruit.innerHTML);
console.log('Last color:', lastColor.innerHTML);
document.getElementById('last-result').innerHTML =
'Last fruit: ' + lastFruit.innerHTML + '<br>' +
'Last color: ' + lastColor.innerHTML;
</script>
</body>
</html>
Last fruit: Orange Last color: Green Last fruit: Orange Last color: Green
Comparison Table
| Property | Returns | Handles Whitespace | Recommended |
|---|---|---|---|
firstChild |
Any node (text, comment, element) | Yes - can return text nodes | No |
firstElementChild |
Element nodes only | No - ignores whitespace | Yes |
lastChild |
Any node (text, comment, element) | Yes - can return text nodes | No |
lastElementChild |
Element nodes only | No - ignores whitespace | Yes |
Best Practices
Always use firstElementChild and lastElementChild when working with DOM elements, as they ignore whitespace and comments. Use firstChild and lastChild only when you specifically need to access text nodes or comments.
Conclusion
Use firstElementChild and lastElementChild for reliable access to child elements, as they ignore whitespace and return only HTML elements. The older firstChild and lastChild properties can return unexpected text nodes.
902 Views
