- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
First and last child node of a specific node in JavaScript?
In this article we are going to learn about the first and last child node of a specific node in JavaScript along with suitable examples.
To get the first and last child node of a specific node, there are existing properties called firstChild, lastChild, firstElementChild and lastElementChild.
The difference between the property of firstChild and firstElementChild is that in contrast to firstElementChild, firstChild treats both text and comments contained within html elements as children. The firstChild also considers the whitespace in the text. The same is applicable for lastChild and lastElementChild.
To get the first child of a list
The syntax to get the first child of a list is −
Node.firstChild; Or Node.firstElementChild;
Where, Node can be any HTML element which can be accessed using id name or class name. The first child of a specific node is returned.
Example 1
This is a program to get the first and last child node of a specific node in JavaScript using firstChild and firstElementChild property. The difference between both firstChild and firstElementChild is illustrated.
In the ul list with id “car-list”, if we place comments before the first element and white spaces between each list item, then when we access the first child using firstChild property, it returns undefined. So, avoid whitespaces when using firstChild property and the firstElementChild is always preferred. The same is applicable for lastChild and lastElementChild.
<!DOCTYPE html> <html> <head> <title>A program to get the first child node of a specific node in JavaScript</title> </head> <body style="text-align: center ;"> <p> A program to get the first and last child node of a specific node in JavaScript using firstChild and firstElementChild property.</p> <ul id="car-list"> <li>BMW</li> <li>AUDI</li> <li>RANGE ROVER</li> <li>ROLLS ROYCE</li>//These are the top branded cars </ul> <ul id="top-selling-mobiles"> //Top selling mobiles <li>iPhone</li> <li>Samsung</li> <li>One plus</li> </ul> <p id="first-last"></p> <script> let first_child = document.getElementById('car-list').firstChild.innerHTML; let first_element_child = document.getElementById('top-selling-mobiles').firstElementChild.innerHTML; document.getElementById('first-last').innerHTML = 'First child for the list "car-list" : '+first_child + '<br/>' + 'First Element child for the list "top-selling mobile" : '+first_element_child; </script> </body> </html>
On executing the above code, the below output is generated.
To get the last child of a list
The syntax to get the last child of a list is −
Node.lastChild; Or Node.lastElementChild;
Where, Node can be any HTML element which can be accessed using id name or class name. The last child of a specific node is returned.
Example 2
This is a program to get the first and last child node of a specific node in JavaScript using lastChild and lastElementChild property. The difference between both lastChild and lastElementChild is illustrated.
<!DOCTYPE html> <html> <head> <title>A program to get the first child node of a specific node in JavaScript</title> </head> <body style="text-align: center ;"> <p> A program to get the first and last child node of a specific node in JavaScript using lastChild and lastElementChild property.</p> <ul id="car-list"> //Top Branded Cars<li>BMW</li> <li>AUDI</li> <li>RANGE ROVER</li> <li>ROLLS ROYCE</li> </ul> <ul id="top-selling-mobiles"> //Top selling mobiles <li>iPhone</li> <li>Samsung</li> <li>One plus</li> </ul> <p id="last"></p> <script> let last_child = document.getElementById('car-list').lastChild.innerHTML; let last_element_child = document.getElementById('top-selling-mobiles').lastElementChild.innerHTML; document.getElementById('last').innerHTML = 'Last child for the list "car-list" : '+last_child + '<br/>' + 'Last Element child for the list "top-selling mobile" : '+last_element_child; </script> </body> </html>
On executing the above code, the below output is generated.
- Related Articles
- Remove the child node of a specific element in JavaScript?
- Replace a child node with a new node in JavaScript?
- Child node count in JavaScript?
- Remove all child elements of a DOM node in JavaScript?
- Insert a node as a child before an existing child in JavaScript?
- How can I remove a child node in HTML using JavaScript?
- How can I remove all child elements of a DOM node in JavaScript?
- Program to find number of restricted paths from first to last node in Python
- Node in Javascript
- Finding next greater node for each node in JavaScript
- Java Program to count the child of root node in a JTree
- Get the last node of the LinkedList in C#
- Removing a node in a Javascript Tree
- Remove Last Node of the Linked List using C++
- Get the last item from node list without using length property in JavaScript?
