closest <img src="https://jonneal.dev/dom-logo.svg" alt="closest" width="90" height="90" align="right">

<img alt="npm version" src="https://img.shields.io/npm/v/element-closest.svg" height="20"> <img alt="build status" src="https://img.shields.io/travis/jonathantneal/closest/master.svg" height="20"> <img alt="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">

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

| 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
}