How to get the Parent Node of DOM Element in JavaScript

JavaScript has a lot of built-in functionality that makes working with the DOM on the web easy.

When you are working with DOM elements, a common thing you will want to do is get the parent node of an element.

In this post, we'll learn how to get the parent node of a DOM element in JavaScript.

How to get the parent node of a DOM element in JavaScript

Because of HTML's DOM-like structure, elements are arranged in a tree. This means that each element has a parent node, and each element can have multiple child nodes.

First, let's look at the HTML we'll be working with:

HTML
<div class="parent">
    <div class="child"></div>
</div>

Let's say we want to get the parent node of the child element. We can do this by first querying the DOM for the child element:

JAVASCRIPT
const child = document.querySelector(".child");

console.log(child);

HTML
<div class="child"></div>

Then, we can get the parent node of the child element by using the parentNode property:

JAVASCRIPT
const child = document.querySelector(".child");

const parent = child.parentNode;

console.log(parent);

HTML
<div class="parent">
    <div class="child"></div>
</div>

The only element that does not have a parent node is the document element. This is because the document element is the root of the DOM tree.

Other than the document element, every other element has a parent node and so when you use the parentNode property, you will always get an element back.

Conclusion

In this post, we learned how to get the parent node of a DOM element in JavaScript.

Simply query the DOM for the element you want to get the parent node of, and then use the parentNode property to get the parent node.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share