JavaScript closest() Method

Overview

Every HTML document can be represented in the form of a tree known as DOM. The javascript closest method is used to traverse up the DOM tree from the target element until an element that matches the selector passed is found. The closest() method starts at the element itself, then the ancestors until a match is found. If no matches are found, the closest() method returns null.

Syntax of JavaScript closest() Method

The syntax of the closest() method in JavaScript is as follows:

In the above syntax, selectors refers to the name of the selector which needs to be found in the DOM tree.

Parameters of JavaScript closest() Method

The closest method in javascript takes the name of the selector as the parameter.

Return Value of JavaScript closest() Method

The closest() method in JavaScript will return the element that matches the selector. If there are no such elements matching the selector passed, the method returns null.

Exceptions of JavaScript closest() Method

The javascript closest method doesn't throw any exceptions.

Example

Code

Explanation

The DOM (Document object model) tree for the above example is represented below.

dom-tree

If we try to map their respective elements with the id, we can illustrate the DOM tree as it is illustrated below.

dom-tree-with-elements

In the above code,

we have a simple code with a division tag with id div1.
We have added a few more tags such as heading (h3) and a few division tags inside the division div1.
In the script tag, we have the div3 id in the targetElement variable.
Using the Javascript closest() method, we will find the id div1 closest to the targetElement.

What is JavaScript closest() Method?

The Javascript closest method is used to find the closest parent or ancestor of the element that matches the selector. The javascript closest method takes the selector as the parameter. The closest method in Javascript traverses up the DOM tree from the targetElement until the selector which is passed as the parameter is found. If the selector passed as the parameter is not found, Then the closest method returns NULL.

More Examples

Example 1

Passing a selector which is not present in the DOM

Code

Explanation

The above code is similar to the previous code. The only change in the program is we are trying to find the selector div9 which is not present in the DOM. As the selector is not present in the DOM, we can see that null is logged at the console.

Example 2

Passing a selector which is present in the sibling

Code

Explanation

The DOM for the above code can be represented as below.

output-dom-treepassing-selector-present-in-sibling

In the above code,

div3 is selected as the targetElement.
The closest method is used to find the occurrence of div6 in the DOM.
We can see that div6 is present in the sibling.
With the previous knowledge, we know that in the closest method we traverse up the DOM tree.
As the div6 element is present in the sibling, the closest method in JavaScript can't find div6. Hence, null is returned.

Supported Browsers

The JavaScript closest method has wide support from browsers. Here is a list of some of the popular browsers and their support for the closest method in JavaScript.

Browser	Chrome	Edge	Firefox	WebView Android	Opera	Safari
closest()	41	15	35	41	28	6

Conclusion

The closest() method in javascript traverses up the DOM tree until it finds a node that matches the CSS selector passed as the parameter.
The syntax of the closest method in JavaScript is given by targetElement.closest(selectors);.
The selector which is passed as the parameter will be searched by traversing up the DOM from the targetElement until the selectors element is found.
If the element is not found in the DOM tree, null is returned.