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.
<!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() {
let w =
document.getElementById("GFG").parentElement.nodeName;
document.getElementById("sudo").innerHTML = w;
}
</script>
</body>
</html>
Output:
Example 2: This example hides 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:
Supported Browsers: The browser supported by DOM parentElement property are listed below:
- Google Chrome 1.0 and above
- Edge 12 and above
- Internet Explorer 8 and above
- Firefox 9.0 and above
- Opera 7 and above
- Safari 1.1 and above