element-closest

What is element-closest?

The element-closest npm package is a polyfill for the Element.closest() method, which allows you to find the closest ancestor of an element that matches a given CSS selector. This is particularly useful for ensuring compatibility with older browsers that do not support the native Element.closest() method.

What are element-closest's main functionalities?

Find closest ancestor

This feature allows you to find the closest ancestor of an element that matches a specified CSS selector. In this example, the closest ancestor of the element with the ID 'childElement' that has the class 'ancestorClass' is returned.

document.querySelector('#childElement').closest('.ancestorClass');

Other packages similar to element-closest

matches-selector

The matches-selector package provides a polyfill for the Element.matches() method, which checks if an element matches a given CSS selector. While it does not provide the same functionality as element-closest, it is often used in conjunction with it to ensure broader compatibility with older browsers.

dom-closest

The dom-closest package is another polyfill for the Element.closest() method. It offers similar functionality to element-closest, allowing you to find the closest ancestor of an element that matches a given CSS selector. It is a direct alternative to element-closest.

README

closest

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 258 bytes when minified and gzipped.

Usage

For immediate usage, add this script to your document:

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

For Node usage, run closest with your window object:

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

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

Browser compatibility

Browser	Native Support	Polyfill Support
Android	53	2.2+
Blackberry	✘	7+
Chrome	41+	4 - 40
Edge	15	12 - 14
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

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
}

Changelog

3.0.0 (December 20, 2018)

• Rewritten for usage within Node environments
• Improved documentation