# dom-helpers

> tiny modular DOM lib for ie9+

Latest version **6.0.1** (published 2025-06-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install dom-helpers
pnpm add dom-helpers
yarn add dom-helpers
bun add dom-helpers
```

## Health

**Score 55/100 (C)** — status: stable.

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

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 6.0.1 |
| Published | 2025-06-20 |
| First published | 2015-03-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 115.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 402 |
| Author | Jason Quense |
| Maintainers | monastic.panic, taion, kytsang |
| Keywords | dom-helpers, react-component, dom, api, cross-browser, style, event, height, width, dom-helpers, class, classlist, css |

## Links

- npm: https://www.npmjs.com/package/dom-helpers
- Repository: https://github.com/react-bootstrap/dom-helpers
- Homepage: https://github.com/react-bootstrap/dom-helpers#readme
- Issues: https://github.com/react-bootstrap/dom-helpers/issues
- npm.io page: https://npm.io/package/dom-helpers

## Dependencies (2)

- [csstype](https://npm.io/package/csstype.md) ^3.1.3
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.27.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 6.0.1 (latest) — 2025-06-20
- 6.0.0 — 2025-06-20
- 5.2.1 — 2021-04-26
- 5.2.0 — 2020-08-02
- 5.1.4 — 2020-03-30
- 5.1.3 — 2019-10-25
- 5.1.2 — 2019-10-18
- 5.1.1 — 2019-10-18
- 5.1.0 — 2019-09-05
- 5.0.1 — 2019-08-30
- 3.4.0 — 2018-11-02
- 3.3.1 — 2017-12-20
- 3.3.0 — 2017-12-20
- 3.2.1 — 2017-02-04
- 3.2.0 — 2016-12-09
- … 21 more at https://npm.io/package/dom-helpers/versions

## README

# dom-helpers

tiny modular DOM lib for ie9+

## Install

```sh
npm i -S dom-helpers
```

Mostly just naive wrappers around common DOM API inconsistencies, Cross browser work is minimal and mostly taken from jQuery. This library doesn't do a lot to normalize behavior across browsers, it mostly seeks to provide a common interface, and eliminate the need to write the same damn `if (ie9)` statements in every project.

For example `on()` works in all browsers ie9+ but it uses the native event system so actual event oddities will continue to exist. If you need **robust** cross-browser support, use jQuery. If you are just tired of rewriting:

```js
if (document.addEventListener)
  return (node, eventName, handler, capture) =>
    node.addEventListener(eventName, handler, capture || false)
else if (document.attachEvent)
  return (node, eventName, handler) =>
    node.attachEvent('on' + eventName, handler)
```

over and over again, or you need a ok `getComputedStyle` polyfill but don't want to include all of jQuery, use this.

dom-helpers does expect certain, polyfillable, es5 features to be present for which you can use `es5-shim` where needed

The real advantage to this collection is that any method can be required individually, meaning bundlers like webpack will only include the exact methods you use. This is great for environments where jQuery doesn't make sense, such as `React` where you only occasionally need to do direct DOM manipulation.

All methods are exported as a flat namesapce

```js
var helpers = require('dom-helpers')
var offset = require('dom-helpers/offset')

// style is a function
require('dom-helpers/css')(node, { width: '40px' })
```

- dom-helpers
  - `ownerDocument(element)`: returns the element's document owner
  - `ownerWindow(element)`: returns the element's document window
  - `activeElement`: return focused element safely
  - `querySelectorAll(element, selector)`: optimized qsa, uses `getElementBy{Id|TagName|ClassName}` if it can.
  - `contains(container, element)`
  - `height(element, useClientHeight)`
  - `width(element, useClientWidth)`
  - `matches(element, selector)`
  - `offset(element)` -> `{ top: Number, left: Number, height: Number, width: Number}`
  - `offsetParent(element)`: return the parent node that the element is offset from
  - `position(element, [offsetParent]`: return "offset" of the node to its offsetParent, optionally you can specify the offset parent if different than the "real" one
  - `scrollTop(element, [value])`
  - `scrollLeft(element, [value])`
  - `scrollParent(element)`
  - `addClass(element, className)`
  - `removeClass(element, className)`
  - `hasClass(element, className)`
  - `toggleClass(element, className)`
  - `style(element, propName)` or `style(element, objectOfPropValues)`
  - `getComputedStyle(element)` -> `getPropertyValue(name)`
  - `animate(node, properties, duration, easing, callback)` programmatically start css transitions
  - `transitionEnd(node, handler, [duration], [padding])` listens for transition end, and ensures that the handler if called even if the transition fails to fire its end event. Will attempt to read duration from the element, otherwise one can be provided
  - `addEventListener(node, eventName, handler, [options])`:
  - `removeEventListener(node, eventName, handler, [options])`:
  - `listen(node, eventName, handler, [options])`: wraps `addEventlistener` and returns a function that calls `removeEventListener` for you
  - `filter(selector, fn)`: returns a function handler that only fires when the target matches or is contained in the selector ex: `on(list, 'click', filter('li > a', handler))`
  - `requestAnimationFrame(cb)` returns an ID for canceling
  - `cancelAnimationFrame(id)`
  - `scrollbarSize([recalc])` returns the scrollbar's width size in pixels
  - `scrollTo(element, [scrollParent])`

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