JavaScript closest() Method
FREE
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.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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.
If we try to map their respective elements with the id, we can illustrate the DOM tree as it is illustrated below.
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.
Turn Learning into Career Growth
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.
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.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more