How to Access Parent Element in JavaScript: parentNode and parentElement

In JavaScript, you can easily navigate the Document Object Model (DOM) tree to access the parent element of a given DOM element using the parentNode or parentElement properties. This guide will provide you with a comprehensive understanding of both methods and their practical applications.

Using parentNode

The parentNode property is a fundamental tool for working with the DOM. It returns the parent node of the specified node in the DOM tree.

Example:

const childElement  child; // Select a child elementconst parentElement  ; // Access the parent elementconsole.log(parentElement); // Output the parent element

Using parentElement

The parentElement property is similar to parentNode but with an added functionality: it returns the parent element only if it exists, and null if the parent is not an element. This makes it particularly useful when you need to ensure that you are working with an HTML element.

Example:

const childElement  child; // Select a child elementconst parentElement  ; // Access the parent elementconsole.log(parentElement); // Output the parent element

Example Scenario

Consider the following HTML structure:

div idparent    div idchild/div/div

Using either parentNode or parentElement on the child div will give you the parent div.

Notes and Considerations

parentNode: Use this property if you want to access any type of node, including text nodes. parentElement: Use this property when you specifically want to ensure that you are dealing with an HTML element.

Notes: Feel free to ask if you have more questions or need further clarification!

Examples in Practice

Plain JavaScript

Here's a plain JavaScript example:

const child  document.querySelector('#child');const parent  ;console.log(parent); // Output the parent element

This is equivalent to:

document.querySelector('#child').parentNode;

jQuery

If you prefer using jQuery, you can access the parent element using the parent() method:

const child  $('#child');const parent  (); // Equivalent to: $('#child').parent()

Further Exploration

To better understand these concepts, you can try out examples in your development environment. For instance, here is an interactive JSFiddle example:

Check out this JSFiddle for an example!

By mastering these properties, you will be well-equipped to navigate DOM structures in JavaScript, making your web development endeavors more efficient and effective.