ec

element-closest

Return the closest element matching a selector up the DOM tree

Showing:

Popularity

Downloads/wk

187K

GitHub Stars

355

Maintenance

Last Commit

2yrs ago

Contributors

8

Package

Dependencies

0

Size (min+gzip)

0.3KB

License

CC0-1.0

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

closest closest

npm version build status support chat

closest is a polyfill for #Element.closest.

npm install element-closest

The #Element.closest method returns the closest element that matches a selector. It returns the element itself, one of its ancestor, or null if there isn't any match.

element.closest(selectorString) //=> Element or null

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 script is approximately 428 bytes, or 257 bytes when gzipped.

Usage

For immediate usage, add this script to your document:

<script src="https://unpkg.com/element-closest"></script>

For usage in Node, including Browserify and Webpack, run closest with your window object:

const elementClosest = require('element-closest');

elementClosest(window); // this is used to reference window.Element

Browser compatibility

BrowserNative SupportPolyfill Support
Android532.2+
Blackberry7+
Chrome41+4 - 40
Edge1512 - 14
Firefox35+3.5 - 34
Internet Explorer8+
Opera28+10 - 27
Opera Mobile37+12+
Safari (iOS)9.2+3.2 - 8.4
Safari (MacOS)9.1+3.1 - 8

Internet Explorer 8

closest is especially useful for delegating events, but remember that Internet Explorer 8 does not support #Element.addEventListener.

matches

This library 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.

const widget = document.querySelector('.custom-widget');

if (widget.matches('[data-active]') || widget.matches('.widget--active')) {
  // do something with the active widget
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial