By using the querySelector Method
- The querySelector() method in HTML is used to return the first element that matches a specified CSS selector(s) in the document.
- Select the parent element whose child element is going to be selected.
- Use .querySelector() method on the parent.
- Use the className of the child to select that particular child.
Example: This example implements the .querySelector() method to get the first element to match the specified CSS selector(s) in the document.
HTML
<!DOCTYPE HTML><html><head> <title> How to get the child element of a parent using JavaScript ? </title> <style> .parent { background: green; color: white; } .child1 { background: blue; color: white; margin: 10px; } .child2 { background: red; color: white; margin: 10px; } </style></head><body style="text-align:center;"> <h1 style="color:green;"> w3wiki </h1> <h3> Click on the button select the child node </h3> <div class="parent" id="parent"> Parent <div class="child child1"> Child1 </div> <div class="child child2"> Child2 </div> </div> <br> <button onclick="GFG_Fun()"> click here </button> <h1 id="result" style="color: green;"></h1> <script> let res = document.getElementById('result'); function GFG_Fun() { let parent = document.getElementById('parent'); let children = parent.querySelectorAll('.child'); res.innerHTML = "Text of child node is - '" + children[0].innerHTML + "' and '" + children[1].innerHTML + "'"; } </script></body></html> |
Output:
.querySelector() Method
How to get the child element of a parent using JavaScript ?
In this article, we will learn to get the child element of the parent using JavaScript. Given an HTML document, the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript.
There are 2 ways to get the child element:
Table of Content
- By using the children property
- By using the querySelector Method