HTML - DOM Element parentElement Property

Quiz

The HTML DOM Element parentElement property is used to retrieve the immediate parent element parent element of any element within the the document.

A parent element refers to an element that contains other elements (its children) within the document tree. The parent element is one level above its children in the DOM hierarchy.

Note: If the current element does not have an immediate parent node, the "parentElement" property will return null.

Syntax

Following is the syntax of the HTML DOM Element parentElement property −

element.parentElement;

Parameters

Since this is a property, it does not accept any parameter.

Return Value

This property returns the immediate parent element of the particular element. If "no parent" element exists, it returns null.

Example 1: Retrieving the Parent Element

The following is a basic example of the HTML DOM Element parentElement. It retrieves the document's parent element −

<!DOCTYPE html>
<html lang="en">
<head> <title>HTML DOM Element parentElement</title>
</head>
<body>
<h3>HTML DOM Element parentElement Property</h3>
<p>Click the button to see parent Element</p>
<button onclick="displayParent()">Display Parent</button>
<p id="ot"></p>
<script>
   function displayParent() {
      var child = document.querySelector('body');
      var pele = child.parentElement;
      var odiv = document.getElementById('ot');
      odiv.textContent =  'Parent Element: ' + pele.tagName;
   }
</script>
</body>
</html>

The above program displays the parent (root) element in the document.

Example 2: Retrieving the Parent Element of a Paragraph (p)

The following is another example of the HTML DOM Element parentElement. This property retrieves the parent element of a specified element (e.g., the p element) in the document.

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element parentElement</title>
</head>
<body>
<h3>HTML DOM Element parentElement Property</h3>
<p>Click the button to see parent Element</p>
<div>
<p id="para">This is a paragraph inside a div.</p>
<button onclick="displayParent()">Display Parent</button>
</div>
<hr>
<div id="ot"></div>
<script>
   function displayParent() {
      var para=document.getElementById('para');
      var pele = para.parentElement;
      var oDiv = document.getElementById('ot')
      oDiv.textContent = 'Parent Element of p is: ' + pele.tagName;
   }
</script>
</body>
</html>

When the button is clicked, it displays the parent element of the paragraph (p) element.

Example 3: Hierarchy of the Parent Child Element

In the example below, we use this property to retrieve the hierarchy of the parent-child elements in the document −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element parentElement Property</title>
</head>
<body>
<h3>HTML DOM Element parentElement Property</h3>
<p>Click the button to see the parent element hierarchy.</p>
<div>
<p id="para">This is a paragraph inside a div.</p>
<button onclick="displayParent()">Display Hierarchy</button>
</div>
<hr>
<div id="ot"></div>
<script>
   function displayParent() {
      var para = document.getElementById('para');
      var hierarchy = para.tagName;
      while (para.parentElement) {
         para = para.parentElement;
         hierarchy += ' -> ' + para.tagName.toLowerCase();
      }
      document.getElementById('ot').textContent = hierarchy;
   }
</script>
</body>
</html>

The above program displays the complete hierarchy of the parent-child elements in the document.

Example 4

If the specified element does not have any parent element, it will return "null" in the output −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element parentElement Property</title>
</head>
<body>
<h3>HTML DOM Element parentElement Property</h3>
<p>This is a paragraph</p>
<button onclick="displayParent()">Display Parent of HTML</button>
<p id="output"></p>
<script>
function displayParent() {
    var htmlElement = document.documentElement;
    var p_ele = htmlElement.parentElement;
    document.getElementById("output").innerHTML = 
	"Parent element of HTML: " + (p_ele ? p_ele.tagName : 'null');
}
</script>
</body>
</html>

Once the above program is executed, it will display 'null' because the HTML element does not have any parent. It is the parent of all elements in the document itself.

Supported Browsers

Property
parentElement	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page