HTML DOM parentElement Property

❮ Previous ❮ Element Object Reference Next ❯

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>):

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

❮ Previous ❮ Element Object Reference Next ❯