How to Find Child Element in JavaScript
-
Use the
firstChildandlastChildProperties to Find Nodes -
Use the
firstElementChildandlastElementChildProperties to Find Child Elements -
Use the
childrenProperty to Get an Element List -
Use the
childNodesProperty to Get a Node List
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:
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 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 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:
