Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Method 1: Using the Node.contains() method

The Node.contains() method is used to check if a given node is the descendant of another node at any level. The descendant may be directly the child’s parent or further up the chain. It returns a boolean value of the result. This method is used on the parent element and the parameter passed in the method is the child element to be checked. It returns true if the child is a descendant of the parent. This means that the element is a child of the parent. 

Syntax: 

function checkParent(parent, child) {
if (parent.contains(child))
return true;
return false;
}

Example: This example shows the implementation of the above-explained approach.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent,
        .child,
        .non-child {
            border: 2px solid;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
 
<body>
 
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>
        How to Check if an element is
        a child of a parent using JavaScript?
    </b>
    <div class="parent">This is the parent div.
        <div class="child">This is the child div.
        </div>
    </div>
    <div class="non-child">
        This is outside the parent div.
    </div>
    <p>Click on the button to check if the
        elements are child of a parent.</p>
    <p>Child has parent:
        <span class="output-child"></span>
    </p>
    <p>Non-Child has parent:
        <span class="output-non-child"></span>
    </p>
 
    <button onclick="checkElements()">
        Check elements
    </button>
    <script>
        function checkParent(parent, child) {
            if (parent.contains(child))
                return true;
            return false;
        }
 
        function checkElements() {
            parent = document.querySelector('.parent');
            child = document.querySelector('.child');
            non_child = document.querySelector('.non-child');
 
            output_child = checkParent(parent, child);
            output_non_child = checkParent(parent, non_child);
 
            document.querySelector('.output-child').textContent =
                output_child;
            document.querySelector('.output-non-child').textContent =
                output_non_child;
        }
    </script>
</body>
 
</html>


Output:

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

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

Method 2: Looping through the parents of the given child

The child can be checked to have the given parent by continuously looping through the element’s parents one by one. The parent of each node is found by accessing the parentNode property which returns the parent node if any. A while loop is used until the parent required is found or no more parent elements exist. Inside this loop, each element’s parent node is found in every iteration. If the parent node matches the given one in any iteration, it means that the element is a child of the parent. 

Syntax: 

function checkParent(parent, child) {
let node = child.parentNode;

// keep iterating unless null
while (node != null) {
if (node == parent) {
return true;
}
node = node.parentNode;
}
return false;
}

Example: This example shows the implementation of the above-explained approach.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent,
        .child,
        .non-child {
            border: 2px solid;
            padding: 5px;
            margin: 5px;
        }
    </style>
</head>
 
<body>
 
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>
        How to Check if an element is
        a child of a parent using JavaScript?
    </b>
    <div class="parent">This is the parent div.
        <div class="child">This is the child div.
        </div>
    </div>
    <div class="non-child">
        This is outside the parent div.
    </div>
    <p>Click on the button to check if
        the elements are child of a parent.</p>
    <p>Child has parent:
        <span class="output-child"></span>
    </p>
    <p>Non-Child has parent:
        <span class="output-non-child"></span>
    </p>
 
    <button onclick="checkElements()">
        Check elements
    </button>
    <script>
        function checkParent(parent, child) {
            let node = child.parentNode;
 
            // keep iterating unless null
            while (node != null) {
                if (node == parent) {
                    return true;
                }
                node = node.parentNode;
            }
            return false;
        }
 
        function checkElements() {
            parent = document.querySelector('.parent');
            child = document.querySelector('.child');
            non_child = document.querySelector('.non-child');
 
            output_child = checkParent(parent, child);
            output_non_child = checkParent(parent, non_child);
 
            document.querySelector('.output-child').textContent =
                output_child;
            document.querySelector('.output-non-child').textContent =
                output_non_child;
        }
    </script>
</body>
 
</html>


Output:

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

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

Method 3: Using the hasChildNodes() method

The HTML hasChildNodes() property will return true if the given node has a child node or false if it doesn’t have any child nodes. A blank line or whitespace is also treated as a child node so it also returns true on a blank line or whitespace. 

Example: This example shows the implementation of the above-explained approach.

HTML




<!DOCTYPE html>
<html>
 
<body>
 
    <!--In this example we will create a node of the type div
    and a button which calls a function name "exampleFunction"
    on clicking of this button it will show the properties of
    hasChildNode property -->
    <p id="divId"></p>
    <br>
    <button onclick="exampleFunction()">
        click to know the paragraph tag has any child node
    </button>
    <!-- below paragraph Tag is used to
    print the value of nodeValue properties-->
    <p id="GeeksForGeeks"></p>
 
    <script>
        // utility function to demonstrate hasChildNode Property
        function exampleFunction() {
            // let x used to get the information of those node
            // for which you want to perform
            // hasChildNode properties
            let res =
                document.getElementById("divId").hasChildNodes();
            document.getElementById("GeeksForGeeks"
            ).innerHTML = res;
        }
    </script>
</body>
 
</html>


Output:

Animation

Checking if an element is a child of a parent using the hasChildNodes() method



Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads