HTML DOM parentElement Property

Last Updated : 22 Aug, 2026

The DOM parentElement property is used to return the parent element of a particular child element. It is a read-only property. The parentElement and parentNode properties are similar and the only difference is the parentElement property returns null if the parent node is not an element. 

Syntax

node.parentElement

Return Value: It returns a string that represents the parent node of any child node or it returns a null if the specified node does not contain any parent node. 

Example 1: In this example, we will use parentElement property.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM parentElement Property
    </title>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>DOM parentElement Property</h2>
    <ol type="1">
        <li id="GFG">Quick Sort</li>
        <li>Merge Sort</li>
        <li>Selection Sort</li>
        <li>Heap Sort</li>
    </ol>
<!--Driver Code Ends-->

    <button onclick="Geeks()">
        Submit
    </button>
    <p id="sudo"></p>
    <script>
        function Geeks() {
            let w =
                document.getElementById("GFG").parentElement.nodeName;
            document.getElementById("sudo").innerHTML = w;
        }
    </script>

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->

Example 2: This example hides the parent element to click on the close icon. 

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML DOM parentElement Property
    </title>
    <!-- CSS property to create box-->
    <style>
        div {
            padding: 16px;
            width: 70%;
            background-color: green;
            color: white;
            border-radius: 30px;
        }
        .GFG {
            float: right;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <center>
        <h2>DOM parentElement Property</h2>
<!--Driver Code Ends-->

        <div>
            <span class="GFG" 
                  onclick="this.parentElement.style.display
                            = 'none';">
                ×
            </span>
            <p style="font-size:30px;">GeeksforGeeks.</p>
        </div>
    </center>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
  • It returns only an Element (or null). Unlike parentNode (which can return any type of parent — Element, Document, or DocumentFragment), parentElement specifically returns the parent only if it is an Element node. If the parent is a Document, DocumentFragment, or the node has no parent, it returns null.
  • It is especially useful for element-only traversal. For example, the root <html> element has parentNode === document but parentElement === null. This makes parentElement convenient when you only care about Element parents (e.g., when styling or walking up the element tree without hitting the document node).
Comment

Explore