HTML | DOM parentElement Property - GeeksforGeeks

26 Jul, 2019
The DOM parentElement property is used to returns the parent element of a particular child element. It is a read-only property. The parentElement and parentNode property 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 which 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:
<!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>                  <button onclick="Geeks()">            Submit        </button>                  <p id="sudo"></p>                  <!-- script to find parentElement -->        <script>            function Geeks() {            var w =                 document.getElementById("GFG").parentElement.nodeName;            document.getElementById("sudo").innerHTML = w;            }        </script>    </body></html>                    
Output:Before click on the button:After click on the button:
Example 2: This example hide the parent element to click on the close icon.
<!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>                          <div>                <span class = "GFG"                      onclick = "this.parentElement.style.display                              = 'none';">                 ×                </span>                                  <p style="font-size:30px;">GeeksforGeeks.</p>            </div>        </center>    </body></html>                    
output:Before click on the cross icon:After click on the cross icon:Supported Browsers: The browser supported by DOM parentElement property are listed below:
Google Chrome 1.0
Internet Explorer
Firefox 9.0
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
Form validation using HTML and JavaScript
Express.js express.Router() Function
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript