We can get the child element by class in JavaScript in the following ways –
1. Using querySelector() method
2. Using querySelectorAll() method
3. Using getElementsByClassName() method
4. Using document.getElementById()
5. Using :scope pseudo-class selector
6. Using firstElementChild And nextElementSibling properties
7. Using lastElementChild And previousElementSibling properties
1. Using querySelector() Method
The querySelector() method is used to select the first element that matches a specified CSS selector(s) in the document.
This method returns the selected element as an object.
If no element exists with the specified selector, then the querySelector() method returns null.
Syntax: document.querySelector(selectors);
Parameters: This method accepts a single parameter as mentioned above and described below.
selectors: A CSS selector(s) used to select the first element.
Example
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
.child-element {
color: red;
}
</style>
</head>
<body>
<ul id='parent-element'>
<li class="child-element">Child 1</li>
</ul>
<script>
var parentElement = document.querySelector("parent-element");
var firstChild = parentElement.querySelector(".child-element');
console.log(firstChild);
</script>
</body>
</html>Output
- Child 1
2. Using querySelectorAll() method
The querySelectorAll() is a method of the Element interface used for retrieving a static (not live) NodeList representing a list of elements created by matching the specified group of selectors against the element’s descendants. Hence, we can use this method to get all child elements with a specific class name.
Syntax:
elementNode.querySelectorAll(selectors); // For modern browsers
document.querySelectorAll(selectors); // For old browsers
Parameters: This method accepts a single parameter as mentioned above and described below.
selectors: Required. A DOMString containing one or more CSS selectors to match against.
Return Value: This method returns a static (not live) NodeList representing a list of elements created by matching the specified group of selectors against the element’s descendants.
Example: This example uses querySelectorAll() method to get all child elements with a specific class name.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
.child-element {
color: red;
}
</style>
</head>
<body>
<ul id='parent-element'>
<li class="child-element">Child 1</li>
<li class="child-element">Child 2</li>
</ul>
<script>
var parentElement = document.getElementById("parent-element");
var allChildren = parentElement.querySelectorAll(".child-element');
console.log(allChildren);
</script>
</body>
</html>Output:
- Child 1
- Child 2
3. Using getElementsByClassName() method:
The getElementsByClassName() is a method of the Document interface used for returning an HTMLCollection of elements with the given class name, in the order they appear in the document. Hence, we can use this method to get all child elements with a specific class name.
Syntax:
document.getElementsByClassName(classNames);
Parameters: This method accepts a single parameter as mentioned above and described below.
classNames: Required. A DOMString representing the list of class names to match; class names are separated by whitespace
Return Value: This method returns an HTMLCollection of elements with the given class name.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
.child-element {
color: red;
}
</style>
</head>
<body>
<ul id='parent-element'>
<li class="child-element">Child 1</li>
<li class="child-element">Child 2</li>
</ul>
<script>
var parentElement = document.getElementById("parent-element");
var allChildren = parentElement.getElementsByClassName("child-element');
console.log(allChildren);
</script>
</body>
</html>Output
- Child 1
- Child 2
4. Using document.getElementById() method
This is the most common and popular method to get all child elements with a specific class name. Here, we firstly find the element whose id is “parent-element” by using document.getElementById() method.
After that, we use children property of this element to get all its child nodes.
Now, we iterate through all elements of this collection using for loop and print their class names by using className property as shown below.
Syntax:
document.getElementById(elementId);
Parameters: This method accepts a single parameter as mentioned above and described below.
elementId: Required. A DOMString representing the unique id value of an element in a document.
Return Value: This method returns the Element whose ID is specified by elementID; if there is not such an element, returns null.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
.child-element {
color: red;
}
</style>
</head>
<body>
<ul id='parent-element'>
<li class="child-element">Child 1</li>
<li class="child-element">Child 2</li>
</ul>
<script >
var parentElement = document.getElementById("parent-element");
for(var i = 0; i < parentElement.children.length; i++) {
console.log(parentElement.children.item(i).className);
}
</script>
</body>
</html>Output
- Child 1
- Child 2
5. Using :scope pseudo-class selector
This is a newly introduced pseudo-class selector in CSS3. It matches only the element on which it was invoked, like querySelector() method. This pseudo-class is available in all major browsers except IE and Edge. So, if you are looking for a cross-browser solution then this is not the right method.
Syntax:
tagName:scope { // Declaration goes here }
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style>
.child-element {
color: red;
}
</style>
</head>
<body >
<ul id='parent-element'>
<li class="child-element">Child 1</li>
<li class="child-element">Child 2</li>
</ul >
<script >
var allChildren = document.querySelectorAll("ul:scope > li.child-element');
console.log(allChildren);
</script>
</body>
</html>Output
- Child 1
- Child 2
6. Using firstElementChild And nextElementSibling Property
This is a very simple and easy method to get all child elements with a specific class name. Here, we use firstElementChild and nextElementSibling property to get elements in a loop as shown below.
Syntax: node.firstElementChild;
Parameters: This method does not accept any parameter.
Return Value: This method returns the first Element node within node, or null if none exists.
For the nextElemetSibling property, the syntax is given below:
Syntax: node.nextElementSibling;
Parameters: This method does not accept any parameter.
Return Value: This method returns the next Element node following node, or null if there is none.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style >
.child-element {
color: red;
}
</style>
</head>
<body >
<ul id='parent-element'>
<li class="child-element">Child 1</li>
<li class="child-element">Child 2</li>
</ul >
<script > // Function to get all children with specific class name function myFunction() {
var parentElement = document.getElementById('parent-element');
var firstChild = parentElement.firstElementChild;
while(firstChild) {
if (firstChild.className === "child-element") {
console.log(firstChild);
}
firstChild = firstChild.nextElementSibling;
}
}
myFunction();
</script>
</body>
</html>Output
- Child 1
- Child 2
7. Using lastElementChild Property And previousElementSibling Property
This is a very simple and easy method to get all child elements with a specific class name. Here, we use lastElementChild property of the parent element. This property returns the last child nodes as an element node. If there are no child nodes then it return null.
The previousElementSibling property returns the previous element from the specified node as an element node. If there is no previous sibling then it return NULL.
Syntax: node.lastElementChild;
Parameters – This method does not accept any parameter.
Return Value – This method returns the last Element node within node, or null if none exists.
For the previousElementSibling property, the syntax is given below:
Syntax: node.previousElementSibling;
Parameters – This method does not accept any parameter.
Return Value – This method returns the previous Element node following node, or null if there is none.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<style >
.child-element {
color: red;
}
</style>
</head>
<body >
<ul id='parent-element'>
<li class="child-element">Child 1</li>
<li class="child-element">Child 2</li>
</ul >
<script > // Function to get all children with specific class name
function myFunction() {
var parentElement = document.getElementById('parent-element');
var lastChild = parentElement.lastElementChild;
while(lastChild) {
if (lastChild.className === "child-element") {
console.log(lastChild);
}
lastChild = lastChild.previousElementSibling;
}
}
myFunction();
</script>
</body>
</html>Output
- Child 1
- Child 2
Conclusion – Get The Child Element By Class In JavaScript
So, this is all about how to get the child element by class in JavaScript. I hope you have enjoyed this article and will be able to implement it in your project easily. You can use any of the above methods as per your requirement or convenience.
If you have any doubts or suggestions then please let us know in the comments section below.
Happy Learning! 🙂