closest
Return the closest element matching a selector up the DOM tree
closest is a polyfill for #Element.closest
, a DOM method which 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();
}
});
matches
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 compatibility
Browser | Native Support | Polyfill Support |
---|---|---|
Android | ✘ | 2.2+ |
Blackberry | ✘ | 7+ |
Chrome | 41+ | 4 - 40 |
Edge | ✘ | 12+ |
Firefox | 35+ | 3.5 - 34 |
Internet Explorer | ✘ | 8+ |
Opera | 28+ | 10 - 27 |
Opera Mini | ✘ | 5+ |
Safari (iOS) | 9 | 3.2 - 8.4 |
Safari (MacOS) | 9.2+ | 3.1 - 8 |
Internet Explorer 8
closest
is especially useful for delegating events, but remember that
Internet Explorer 8 does not support #Element.addEventListener
.