# element-closest

> Return the closest element matching a selector up the DOM tree

Latest version **3.0.2** (published 2019-10-31) · CC0-1.0 license · 0 weekly downloads

## Install

```sh
npm install element-closest
pnpm add element-closest
yarn add element-closest
bun add element-closest
```

## Health

**Score 28/100 (F)** — status: abandoned.

Positive: has types package; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2019-10-31 |
| First published | 2015-06-08 |
| Weekly downloads | 0 |
| License | CC0-1.0 |
| TypeScript types | separate (@types/element-closest) |
| Module format | ESM + CommonJS |
| Node | >=0.12.0 |
| Dependencies | 0 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 352 |
| Author | Jonathan Neal |
| Maintainers | jonathantneal, trysound |
| Keywords | javascript, js, dom, document, element, node, closest, matches, polyfill, web, standard |

## Links

- npm: https://www.npmjs.com/package/element-closest
- Repository: https://github.com/jonathantneal/closest
- Homepage: https://github.com/jonathantneal/closest#readme
- Issues: https://github.com/jonathantneal/closest/issues
- npm.io page: https://npm.io/package/element-closest

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 3.0.2 (latest) — 2019-10-31
- 3.0.1 — 2019-02-05
- 3.0.0 — 2018-12-20
- 2.0.2 — 2016-10-27
- 2.0.1 — 2016-04-09
- 2.0.0 — 2016-04-08
- 1.0.3 — 2015-06-23
- 1.0.2 — 2015-06-08

## README

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

[<img alt="npm version" src="https://img.shields.io/npm/v/element-closest.svg" height="20">](https://www.npmjs.com/package/element-closest)
[<img alt="build status" src="https://img.shields.io/travis/jonathantneal/closest/master.svg" height="20">](https://travis-ci.org/jonathantneal/closest)
[<img alt="support chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">](https://gitter.im/postcss/postcss)

[closest] is a polyfill for [`#Element.closest`].

```bash
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.

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

This is especially useful for delegating events.

```js
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:

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

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

```js
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.

```js
element.matches(selectorString) //=> boolean
```

`matches` is especially useful for short-handing `hasAttribute` or `classList.contains` with selectors.

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

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

[`#Element.closest`]: https://dom.spec.whatwg.org/#dom-element-closest
[`#Element.matches`]: https://dom.spec.whatwg.org/#dom-element-matches
[`#Element.addEventListener`]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Browser_compatibility
[closest]: https://github.com/jonathantneal/closest

---
_Source: https://npm.io/package/element-closest · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._