Element: closest() method
The closest()
method of the Element
interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
Syntax
js
closest(selectors)
Parameters
selectors
-
A string of valid CSS selector to match the
Element
and its ancestors against.
Return value
The closest ancestor Element
or itself, which matches the selectors
. If there are no such element, null
.
Exceptions
SyntaxError
DOMException
-
Thrown if the
selectors
is not a valid CSS selector.
Examples
HTML
html
<article>
<div id="div-01">
Here is div-01
<div id="div-02">
Here is div-02
<div id="div-03">Here is div-03</div>
</div>
</div>
</article>
JavaScript
js
const el = document.getElementById("div-03");
// the closest ancestor with the id of "div-02"
console.log(el.closest("#div-02")); // <div id="div-02">
// the closest ancestor which is a div in a div
console.log(el.closest("div div")); // <div id="div-03">
// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">
// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>
Specifications
Specification |
---|
DOM Standard # ref-for-dom-element-closest① |
Browser compatibility
BCD tables only load in the browser
Compatibility notes
-
In Edge 15-18
document.createElement(tagName).closest(tagName)
will returnnull
if the element is not first connected (directly or indirectly) to the context object, for example theDocument
object in the case of the normal DOM.
See also
- CSS selectors reference
- Other
Element
methods that take selectors:Element.querySelector()
,Element.querySelectorAll()
, andElement.matches()
.