Return the closest element matching a selector up the DOM tree
closest is a polyfill for #Element.closest
.
The #Element.closest
method returns the closest ancestor of the current
element (or the current element itself) which matches the selectors given in
parameter. If there isn't such an ancestor, it returns null.
element.closest(selectorString) //=> element
This is especially useful for delegating events.
document.addEventListener('click', function (event) {
// find nearest element up the tree that is an <a>
var link = event.target.closest('a');
if (link) {
// do something with the <a>
event.preventDefault();
}
});
The also polyfills #Element.matches
, which is
widely supported but often vendor-prefixed.
element.matches(selectorString) //=> boolean
matches
is especially useful for short-handing hasAttribute
or
classList.contains
with selectors.
var widget = document.querySelector('.custom-widget');
if (widget.matches('[data-active]') || widget.matches('.widget--active')) {
// do something with the active widget
}
Browser | Native Support | Polyfill Support |
---|---|---|
Android | 53 | 2.2+ |
Blackberry | ✘ | 7+ |
Chrome | 41+ | 4 - 40 |
Edge | ✘ | 12+ |
Firefox | 35+ | 3.5 - 34 |
Internet Explorer | ✘ | 8+ |
Opera | 28+ | 10 - 27 |
Opera Mobile | 37+ | 12+ |
Safari (iOS) | 9.2+ | 3.2 - 8.4 |
Safari (MacOS) | 9.1+ | 3.1 - 8 |
closest
is especially useful for delegating events, but remember that
Internet Explorer 8 does not support #Element.addEventListener
.