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
<!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 >
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.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
HTML DOM parentElement Property
</ title >
< 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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 Jun, 2023
Like Article
Save Article