How do you get the parent element of an element in JavaScript?

In JavaScript, the Document Object Model (DOM) is a programming interface for web pages that allows JavaScript to interact with HTML and XML elements on a web page.

One common task in DOM manipulation is to access the parent element of an element, which refers to the immediate ancestor of the element in the DOM tree.

There are several ways to get the parent element of an element in JavaScript.

1. `parentNode`:

The parentNode property is a property of DOM elements that returns the parent element of the current element. It is a read-only property and can be used to access the immediate parent element of an element.

For example:

const childElement = document.getElementById("childElementId");
const parentElement = childElement.parentNode;
console.log(parentElement); // returns the parent element of the childElement

In this example, we first select the child element using getElementById method and store it in a variable childElement. Then we use the parentNode property to access the parent element of childElement and store it in a variable parentElement.

2. `parentElement`:

The parentElement property is similar to parentNode and returns the parent element of the current element.

The main difference is that parentElement only returns the parent element if it is an element node, whereas parentNode may return other types of nodes such as text nodes or comment nodes.

For example:

const childElement = document.getElementById("childElementId");
const parentElement = childElement.parentElement;
console.log(parentElement); // returns the parent element of the childElement

3. Using `closest()` method:

The closest() method is a powerful and versatile method that allows you to find the closest ancestor of an element that matches a given selector. It starts from the current element and goes up the DOM tree until it finds an element that matches the given selector or reaches the root element.

For example:

const childElement = document.getElementById("childElementId");
const parentElement = childElement.closest(".parentClass");
console.log(parentElement); // returns the closest ancestor element with the class 'parentClass'

In this example, we use the closest() method to find the closest ancestor element of childElement that has the class name 'parentClass'. The selector argument can be any valid CSS selector such as class name, id, or element type.

Comparision between `parentNode` vs `parentElement` vs `closest()`:

It’s important to note that parentNode, parentElement, and closest() have some differences in their behavior.

parentNode and parentElement are properties of DOM elements and always return the immediate parent element, regardless of whether it matches the given selector or not. On the other hand, closest() method searches for the closest ancestor element that matches the given selector.
parentNode may return other types of nodes such as text nodes or comment nodes, whereas parentElement only returns the parent element if it is an element node.
closest() method is more versatile as it allows you to find the closest ancestor element that matches a given selector, whereas parentNode and parentElement only give you the immediate parent element.
closest() method returns null if no matching ancestor element is found, whereas parentNode and parentElement return null or undefined if there is no parent element.