HTML - DOM Element parentNode Property

Quiz

The HTML DOM Element parentNode property is used to access the immediate parent node of a particular node within the HTML document. It returns the parent node of the specified node as a Node object.

If the specified element is the root element in the document, it will return null.

Syntax

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

element.parentNode;

Parameters

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

Return Value

This property returns the immediate parent node of the element. If no parent node exists it returns null.

Example 1: Accessing Parent Node of DIV Element

The following program demonstrates the usage of the HTML DOM Element parentNode property. It accesses and displays the parent node of <p> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML parentNode Property</title>
</head>
<body>
<h3>HTML DOM Element parentNode Property</h3>
<p>Click the button to see the parent node of a p element.</p>
<div id="parent">
<p>This is a paragraph inside a div.</p>
</div>
<button onclick="showParent()">Show Parent</button>
<hr>
<div id="output"></div>
<script>
   function showParent() {
      var cel = document.querySelector('#parent p');
      var pn = cel.parentNode;
      var otd = document.getElementById('output');
      otd.textContent = `Parent Node: ${pn.tagName}`;
   }
</script>
</body>
</html>

The above program displays the parent node of the "p" element.

Example 2: Iterating through the Parent Nodes

Here is another example of using the HTML DOM Element parentNode property. We use this method to iterate through each parent node −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element parentNode</title>
</head>
<body>
<h3>HTML DOM Element parentNode Property</h3>
<p>This example iterates through the parent element.</p>
<ul id="myList">
   <li>Item 1
   <ul>
      <li>Subitem 1</li>
    </ul>
    </li>
</ul>
<button onclick="showParents()">Show Parents</button>
<div id="ot"></div>
<script>
   function showParents() {
      var subitem = document.querySelector('#myList li ul li');
      var parents = [];
      var curr = subitem;
      while (curr.parentNode) {
         parents.push(curr.parentNode.tagName);
         curr = curr.parentNode;
      }
      var ot = document.getElementById('ot');
      ot.textContent = `Parent Nodes: ${parents.join(' > ')}`;
   }
</script>
</body>
</html>

The above program iterates through each parent node one by one.

Example 3: Accessing the Parent Node of the Root Element

In the example below we are using the parentNode property

Supported Browsers

Property
parentNode	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page