HTML DOM parentElement Property
Examples
Get the node name of the parent element of a <li> element:
var x = document.getElementById("myLI").parentElement.nodeName;
Try it Yourself »
Click on an element (<span>) to hide its parent element (<div>):
<div>
<span onclick="this.parentElement.style.display = 'none';">x</span>
</div>
Try it Yourself »
Description
The parentElement property returns the parent element of the specified element.
The difference between parentElement and parentNode, is that parentElement returns null if the parent node is not an element node:
document.body.parentNode; // Returns the <html> element
document.body.parentElement; // Returns the <html> element
document.documentElement.parentNode; // Returns the Document node
document.documentElement.parentElement; // Returns null (<html> does not have a parent ELEMENT node)
In most cases, it does not matter which property you use, however, parentNode is probably the most popular.
This property is read-only.
HTML Nodes vs Elements
In the HTML DOM (Document Object Model), an HTML document is a collection of nodes with (or without) child nodes.
Nodes are element nodes, text nodes, and comment nodes.
Whitespace between elements are also text nodes.
Elements are only element nodes.
childNodes vs children
childNodes returns child nodes (element nodes, text nodes, and comment nodes).
children returns child elements (not text and comment nodes).
Siblings vs Element Siblings
Siblings are "brothers" and "sisters".
Siblings are nodes with the same parent (in the same childNodes list).
Element Siblings are elements with the same parent (in the same children list).
Syntax
node.parentElement
Technical Details
| Return Value: | An Element object, representing the parent element node of a node, or null if the node has no parent |
|---|
Browser Support
element.parentElement is a DOM Level 3 (2004) feature.
It is fully supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 11 |
