How to Get the Content of an HTML Comment using JavaScript ?

How to Get the Child Element of a Parent Using JavaScript?

Last Updated : 28 Jun, 2025

To get a child element of a parent element in JavaScript, you can use several DOM (Document Object Model) methods, such as children, childNodes, querySelector(), or getElementById(). Here are different ways to access child elements based on the situation.

1. Using children property

The children property returns a live HTMLCollection of all child elements of a specified parent element. This property only returns elements (not text nodes, comments, etc.).

HTML

<html>
<head>
    <style>
        .parent {
            background: green;
            color: white;
        }

        .child {
            background: blue;
            color: white;
            margin: 10px;
        }
    </style>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>

    <h3>Click on the button to select the child node</h3>

    <div class="parent" id="parent">
        Parent
        <div class="child"> Child </div>
    </div>
    <br>

    <button onclick="GFG_Fun()">click here</button>

    <h1 id="result" style="color: green;"></h1>

    <script>
        function GFG_Fun() {
            let parent = document.getElementById('parent');
            let child = parent.children[0];
            document.getElementById('result').innerHTML = "Text of child node is - '" + child.innerHTML + "'";
        }
    </script>
</body>
</html>

Output

class Property

In this example

A parent div contains a child div.
When the button is clicked, the GFG_Fun() function is triggered.
It selects the first child of the parent using parent.children[0] and displays its text in the <h1> element.

2. using querySelector Method

The querySelector() method returns the first element within the parent that matches a given CSS selector. This is useful if you need to access a specific child element based on a class, ID, or other attributes.

HTML

<html>
<head>
    <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;">GeeksforGeeks</h1>

    <h3>Click on the button to 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>
        function GFG_Fun() {
            let parent = document.getElementById('parent');
            let children = parent.querySelectorAll('.child');
            document.getElementById('result').innerHTML = "Text of child node is - '" + 
                children[0].innerHTML + "' and '" + 
                children[1].innerHTML + "'";
        }
    </script>
</body>

</html>

Output:

.querySelector() Method

3. Using childNodes Property

The childNodes property returns a NodeList of all child nodes of a specified parent, including elements, text nodes, and comments. This means it includes everything inside the parent element, not just the HTML elements.

HTML

<html>
<head></head>
<body>
    <h1>GeeksforGeeks</h1>

    <h3>Click on the button to select the child node</h3>

    <div class="parent" id="parent">
        Parent
        <div class="child child1">Child1</div>
        <div class="child child2">Child2</div>
    </div>
    <button onclick="GFG_Fun()">Click here</button>
    <h1 id="result"></h1>

    <script>
        function GFG_Fun() {
            let parent = document.getElementById('parent');
            let children = parent.childNodes;

            let child1 = children[1];
            let child2 = children[3];

            document.getElementById('result').innerHTML = "Text of child node is - '" +
                child1.innerHTML + "' and '" +
                child2.innerHTML + "'";
        }
    </script>
</body>
</html>

In this example

childNodes returns all child nodes of an element, including text nodes (spaces, line breaks) and element nodes (like <div>).
parent.childNodes gives a list of all child nodes. Index 0 and 2 are text nodes (spaces). Index 1 and 3 are element nodes (child1, child2).
We access the element nodes with children[1] and children[3] and display their text using innerHTML.

4. Using querySelectorAll() for All Matching Children

querySelectorAll() works similarly to querySelector(), but instead of returning just the first match, it returns all matching child elements as a NodeList.

HTML

<html>
<head></head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Click on the button to select all child nodes</h3>

    <div class="parent" id="parent">
        Parent
        <div class="child child1">Child1</div>
        <div class="child child2">Child2</div>
        <div class="child child1">Child3</div>
        <div class="child child2">Child4</div>
    </div>

    <button onclick="GFG_Fun()">Click here</button>

    <h1 id="result"></h1>

    <script>
        function GFG_Fun() {
            let parent = document.getElementById('parent');
            let children = parent.querySelectorAll('.child');
            
            let text = "";
            children.forEach((child, index) => {
                text += `Child ${index + 1}: ${child.innerHTML} <br>`;
            });

            document.getElementById('result').innerHTML = text;
        }
    </script>
</body>
</html>

In this example

querySelectorAll(): Selects all elements matching the given CSS selector (in this case, .child).
parent.querySelectorAll('.child') selects all child elements with the class .child inside the #parent div.
.forEach() loops through all selected child elements and displays their content in the result section.

5. Using firstElementChild and lastElementChild

FirstElementChild and lastElementChild are properties used to access the first and last element child nodes of an HTML element. These properties are particularly useful when we need to quickly access the first or last child element, ignoring any non-element child nodes (like text or comment nodes).

HTML

<html>
<head></head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3>Click on the button to select first and last child elements</h3>

    <div class="parent" id="parent">
        Parent
        <div class="child child1">Child1</div>
        <div class="child child2">Child2</div>
        <div class="child child1">Child3</div>
        <div class="child child2">Child4</div>
    </div>

    <button onclick="GFG_Fun()">Click here</button>

    <h1 id="result"></h1>

    <script>
        function GFG_Fun() {
            let parent = document.getElementById('parent');
            let firstChild = parent.firstElementChild;
            let lastChild = parent.lastElementChild;

            document.getElementById('result').innerHTML = `First Child: ${firstChild.innerHTML} 
            <br> Last Child: ${lastChild.innerHTML}`;
        }
    </script>
</body>
</html>

In this example

firstElementChild: Gets the first element child of the parent. Ignores text or comment nodes.
lastElementChild: Gets the last element child of the parent. Ignores text or comment nodes.

How to get the child element of a parent using JavaScript ?

How to Get the Content of an HTML Comment using JavaScript ?

P

PranchalKatiyar

Improve

Article Tags :

Similar Reads

How to Check if an element is a child of a parent using JavaScript?

In this article, we are going to see the methods by which we can Check if an element is a child of a parent using JavaScript. These are the following methods: Table of Content Using the Node.contains() methodLooping through the parents of the given childUsing the hasChildNodes() methodMethod 1: Usin

How to count all child elements of a particular element using JavaScript ?

Given an HTML document containing some elements nested elements and the task is to count all the child elements of a particular element. It is very simple to count the number of child elements of a particular element using JavaScript. For example: If you have a parent element consisting of many chil

How to get the text without HTML element using JavaScript ?

Given an HTML document containing some elements and the task is to get the text inside an HTML element using JavaScript. There are two methods to get the text without HTML element which are listed below: Using innerText propertyUsing textContent property Using innerText property: We can use innerTex

JavaScript Get the text of a span element

We are given an HTML document and the task is to get the text of an <span> element. Below are the methods to get the text of a span element using JavaScript:Table of ContentHTML DOM textContent PropertyHTML DOM innerText PropertyHTML DOM textContent PropertyThis property set/return the text co

How to Get the Content of an HTML Comment using JavaScript ?

In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl

How to Access <tr> element from Table using JavaScript ?

Given an HTML table and the task is to access the table element from the Controller and highlight any row that we want. Approach: We will use a basic DOM operation in JavaScript to access table row element. We will be adding highlight class to the row that we click, if the highlight class is already