Getting Child Elements of a Node in JavaScript

In JavaScript, a parent node can contain one or several child elements. The question then arises: how can we retrieve these child elements from a given node in JavaScript?

In this segment, we will explore and examine the methods by which we can retrieve the child elements of a node in JavaScript.

For accessing the child elements of a parent node in JavaScript , there are the following approaches we can use:

✅ Getting the first child element of a node
✅ Getting the last child element of a node
✅ Getting all the children of a node

Let's discuss each approach one by one.

Example

Below is a sample code that will assist us in comprehending the process of retrieving the child elements from a specific node:

Example


<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JavaScript example to Get Child Elements</title>

</head>

<body>

  <ul id="person">

    <li class="class1">Category</li>

    <li>Male or Female</li>

    <li class="class 2">Groups</li>

    <li>Young</li>

    <li>Old</li>

    <li>Child</li>

    <li class="class3">All together</li>

  </ul>

</body>

</html>

At this point, we will examine each methodology we have outlined previously by utilizing the example code provided.

Getting First Child Element of a Node

To retrieve the initial child element of a node, one must utilize the firstChild property associated with that element.

Syntax:

Example


let firstChild = parentElement.firstChild;

In the syntax provided, the variable firstchild is assigned the value of the initial child element, while the parentElement refers to the parent node from which we are attempting to retrieve the value of the first child element.

Key considerations:

✅ In instances where the parentElement lacks any children, the firstChild attribute will yield a null value as the result.
✅ When the property identifies the first child of a parent node, it will provide that child node in return, which may be a text node, an element node, or a comment node.

Example

Let’s examine the following code example to gain insight into the utilization of the firstChild property:

Example


let frstchild = document.getElementById('person');

console.log(frstchild.firstElementChild);

In the code provided above, we have assigned the element id <ul> to the variable frstchild. Subsequently, we retrieved the value of the first child element and assigned it to the same frstchild variable. Ultimately, we obtain the output that reflects the value of that child element.

We can see in the below output:

Getting the last child element of a node

To retrieve the final child element of a node, it is necessary to utilize the lastChild property.

Syntax:

Example


let lastChild = parentElement.lastChild;

The variable lastChild is designed to store the value of the final child element found within the parent node.

Examine the below part of the example code:

Example


let lstchild = document.getElementById('person');

console.log(lstchild.lastElementChild);

In the aforementioned code, it is evident that, akin to how we access the first child element of a node, we have utilized the lastElementChild method to obtain the last child. It is important to note that if the parent node does not contain any child elements, this property will return null. Conversely, if a last child element exists, it will provide its value.

We have the following output:

Point to be noted:

✅ You might have seen that we have not used the lastChild and firstChild property of the node for getting the last and first child element of the parent node in the example code. It is because if we use the firstChild property and lastChild property in our example code, then for maintaining the whitespace between the <ul> and <li> elements, it creates and outputs the '#text' node.
✅ Thus, if there are any whitespaces (single spaces and multiple spaces), returns and tabs, the browser creates the #text node for maintaining them.

Getting all the child elements of a node

To retrieve all the child elements of a specific node, you can utilize either the childNodes or children properties. Both properties allow you to access the designated children of a parent node; however, they differ in their outputs. The childNodes property provides a live NodeList containing all child nodes of various node types, while the children property exclusively returns the child element nodes that are of the element type.

Let's see the syntax for both properties:

The childNodes Property

Example


let children = parentElement.childNodes;

The children Property

Example


let children = parentElement.children;

Examine the code snippet provided below to understand the method for retrieving all child elements:

Example


let person = document.getElementById('person');

let children = person.children;

console.log(children);

In this segment of code, we retrieve all the child nodes of the parent element by utilizing the children property, as illustrated in the snapshot below:

Getting First Child Element of a Node

Getting the last child element of a node

Getting all the child elements of a node

Input Required