How to Find Child Element in JavaScript

Anika Tabassum Era Feb 02, 2024
  1. Use the firstChild and lastChild Properties to Find Nodes
  2. Use the firstElementChild and lastElementChild Properties to Find Child Elements
  3. Use the children Property to Get an Element List
  4. Use the childNodes Property to Get a Node List
How to Find Child Element in JavaScript

In terms of development and dealing with gigantic HTML structures, figuring out a particular element for modification is often a tough call. Thus, in this case, we can take a specific id or class to extract its subordinates and apply the necessity.

It wouldn’t be easier if the properties as children and childNodes were present.

Here, we will focus mainly on two properties. The children property and the childNodes will have the main floor to express the heredity.

We will also see how to extract an individual element from the top and bottom lists. Let’s jump into the code fences for a realistic view.

Use the firstChild and lastChild Properties to Find Nodes

Accordingly, the firstChild and lastChild properties pick the node type of topmost and bottom-most elements. In addition, the output will contain multiple functions or objects.

We will create an HTML structure and use it for every other example.

We will initiate only the firstChild and the lastChild.nodeName to see the console view in the JavaScript code lines.

Code Snippet:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
<ul id="parent">
    <li>Mango</li>
    <li>Apple</li>
    <li>Banana</li>
    <li>Kiwi</li>
    <li>Strawberry</li>
    <li>Melon</li>
</ul>
<script src="okay.js"></script>
</body>
</html>
var parent = document.querySelector('#parent');
let first = parent.firstChild;
console.log(first);
let last = parent.lastChild.nodeName;
console.log(last);

Output:

Use firstChild and lastChild Property to Find nodes

As can be seen, we have a #text object for applying only the firstChild property and specifically the node name for the lastChild.nodeName. Explicitly, defining the nodeName will extract the node type’s name.

In addition, we will have a wide range of other properties and functions along with the returned node type object.

Use the firstElementChild and lastElementChild Properties to Find Child Elements

We will get the direct element in the case of firstElementChild and similar property. The firstChild property usually allocates to many other parameters along with the outer HTML contents of a child element.

However, this specific property will draw out the exact need.

Code Snippet:

var parent = document.querySelector('#parent');
let first = parent.firstElementChild;
console.log(first);
let last = parent.lastElementChild;
console.log(last);

Output:

Use firstElementChild and lastElementChild to Find Child Elements

Use the children Property to Get an Element List

The children property extracts the element type node mentioning some other functions. Altogether, it will count the length of the total child elements under a parent.

Each iteration will also have the detail for each element. Here, the returned object is an HTMLCollection, and it only contains the element nodes’ specifications.

Code Snippet:

var parent = document.querySelector('#parent');
all = parent.children;
console.log(all);

Output:

Use children Property to Get Element List

Use the childNodes Property to Get a Node List

Another way to define the subordinates of a parent id or class is to use the childNodes property. According to this convention, you will get the node list as output, and there will be specifications on the node types in that list.

You get the detail of the elements and the cores of the node name. Here, the object returns as a NodeList.

Code Snippet:

var parent = document.querySelector('#parent');
all = parent.childNodes;
console.log(all);

Output:

Use childNodes Property to Get Node List

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Related Article - JavaScript Element