Table of Contents

JavaScript parentNode is a useful DOM property that lets you move from an element or other node to its immediate parent in the Document Object Model (DOM) tree. It helps you navigate the DOM, access containing elements, and work with parent nodes in event handlers. In this tutorial, you will learn how the parentNode property works, explore practical examples, and understand how it differs from parentElement.

What Is parentNode in JavaScript?

The parentNode property returns the parent node of the specified node in the DOM tree. The returned value is a Node object, which may be an element, document, or document fragment. If the node has no parent, the property returns null.

For example, if a paragraph is inside a div, the paragraph’s parentNode refers to that div.

Syntax of parentNode

node.parentNode;
  • node: The DOM node whose parent you want to find.
  • parentNode: Returns the immediate parent node or null when no parent exists.

Example 1: Get the Parent Element of an HTML Element

In this example, select a paragraph and use parentNode to access its parent div.

This is a child paragraph.

const child = document.getElementById("child-paragraph-one");
const parent = child.parentNode;

console.log(parent);

Output: The browser console displays the div element that contains the paragraph.

Example 2: Change the Parent Element’s Style

You can use parentNode to update the style of a parent element after selecting one of its children.

JavaScript DOM Tutorial

Select the heading’s parent to highlight this container.

const heading = document.getElementById("child-heading-two");

heading.parentNode.style.backgroundColor = "lightblue";

Here, parentNode returns the div containing the heading, and the background color of that div changes.

Example 3: Navigate Multiple Levels Up the DOM Tree

You can chain parentNode to move more than one level up the DOM tree. Each use returns the immediate parent of the current node.

const button = document.getElementById("child-button-three");

const parent = button.parentNode;
const grandparent = button.parentNode.parentNode;

console.log(parent);
console.log(grandparent);

The first parentNode returns the div directly containing the button. The second returns the outer div.

Example 4: Use parentNode with Event Delegation

parentNode is useful when handling events on a child element and then accessing its containing element. The following example uses a click event on a list and reads the parent list item of the clicked button.

  • Learn JavaScript
  • Practice DOM methods
  • Build a small project 
const taskList = document.getElementById("task-list-parent-node");

taskList.addEventListener("click", function(event) {
    if (event.target.tagName === "BUTTON") {
        const listItem = event.target.parentNode;
        listItem.remove();
    }
});

When a Remove button is clicked, event.target refers to that button. Its parentNode is the containing li, which is then removed from the document.

Example 5: Check Whether a Node Has a Parent

A node may not have a parent. Always consider the possibility of null before accessing properties or methods on the returned value.

const element = document.getElementById("child-paragraph-one");

if (element.parentNode) {
    console.log("A parent node exists.");
} else {
    console.log("No parent node was found.");
}

You can also use optional chaining when you only need to read a property safely:

console.log(element.parentNode?.nodeName);

parentNode vs parentElement

Both properties return the immediate parent in many common situations, but they are not identical. parentNode returns a Node, while parentElement returns the parent only when that parent is an Element; otherwise, it returns null.

Feature parentNode parentElement
Return type Node Element or null
Can return a Document Yes No
Can return a DocumentFragment Yes No
Common use General DOM tree navigation Finding a parent HTML element

For example, the document node has no parent element, so document.parentElement is null. The document node itself is also the root of the DOM tree.

Common Mistakes When Using parentNode

  • Assuming the result is always an Element: The returned node can be a Document or DocumentFragment, so check its type when necessary.
  • Ignoring null: A detached node or the document root may not have a parent. Check the result before using it.
  • Confusing parentNode with parentElement: Use parentElement when you specifically need an HTML element as the parent.
  • Moving too many levels: Chaining several parent references can become difficult to maintain. Consider closest() when you need the nearest ancestor matching a CSS selector.

Categorized in:

Javascript, Js DOM,