# domtool

> dom tool

Latest version **1.1.0** (published 2025-11-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install domtool
pnpm add domtool
yarn add domtool
bun add domtool
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2025-11-17 |
| First published | 2016-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | ilex.h |
| Maintainers | ilex.h |
| Keywords | dom, tool |

## Links

- npm: https://www.npmjs.com/package/domtool
- Repository: https://github.com/ilex0208/domtool
- Homepage: https://github.com/ilex0208/domtool#readme
- Issues: https://github.com/ilex0208/domtool/issues
- npm.io page: https://npm.io/package/domtool

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2025-11-17
- 1.0.11 — 2024-01-30
- 1.0.10 — 2022-07-01
- 1.0.9 — 2022-05-26
- 1.0.8 — 2022-05-19
- 1.0.7 — 2022-05-19
- 1.0.6 — 2021-03-04
- 1.0.5 — 2018-06-04
- 1.0.4 — 2018-06-04
- 1.0.3 — 2018-01-11
- 1.0.2 — 2017-12-24
- 1.0.1 — 2017-12-18
- 1.0.0 — 2016-12-26

## README

# DOM Tool

Tool for DOM

```bash
npm install domtool --save
```

## docs

[domtool doc](https://unpkg.com/domtool@latest/docs/index.html)

## insertKeyframesRule

```js
import insertKeyframesRule from 'domtool/lib/insertKeyframesRule';
let keyframes = {
  '0%': {
    transform: 'scale(1)'
  },
  '50%': {
    transform: 'scale(0.5)',
    opacity: 0.7
  },
  '100%': {
    transform: 'scale(1)',
    opacity: 1
  }
};

let animationName = insertKeyframesRule(keyframes);
```

## insertRule

```js
import insertRule from 'domtool/lib/insertRule';
let css = '.foo {}'
insertRule(css);
```

## appendVendorPrefix

```js
import appendVendorPrefix from 'domtool/lib/appendVendorPrefix';
let style = {
  transform: 'scaleX(1)'
}
appendVendorPrefix(style);
```

## getVendorPrefix

```js
import getVendorPrefix from 'domtool/lib/getVendorPrefix';
let vendorPrefix = getVendorPrefix(); // => -webkit-
```

## addClass

```js
import addClass from 'domtool/lib/addClass';
addClass(this.getDOMNode(), 'foo');
```

## removeClass

```js
import removeClass from 'domtool/lib/removeClass';
removeClass(this.getDOMNode(), 'foo');
```

## hasClass

```js
import hasClass from 'domtool/lib/hasClass';
hasClass(this.getDOMNode(), 'foo'); // => true
```

## transitionEventsa

```js
import transitionEvents from 'domtool/lib/transitionEvents';
transitionEvents.addEndEventListener(node, eventListener);
transitionEvents.removeEndEventListener(node, eventListener);
```

## classNames

```js
import classNames from 'domtool/lib/classNames';

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }) // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

// Arrays will be recursively flattened as per the rules above:
let arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'
```

## canUseDOM

```js
import canUseDOM from 'domtool/lib/canUseDOM';
if(canUseDOM){
  // balabala
}
```

## addEventListener

```js
import addEventListener from 'domtool/lib/addEventListener';
addEventListener(window, 'scroll', handle)
```

## removeEventListener

```js
import removeEventListener from 'domtool/lib/removeEventListener';
removeEventListener(window, 'scroll', handle)
```

## throttle

```js
import throttle from 'domtool/lib/throttle';
throttle(fn, 100)

import {funcThrottle} from 'domtool/lib/throttle';
throttle(fn, data, null, 500, 1000)
```

## onEndTransition

```js
import onEndTransition from 'domtool/lib/onEndTransition';
onEndTransition(el, handle)
```

## inViewport

```js
import inViewport from 'domtool/lib/inViewport';
inViewport(el) // true if elem is in the current viewport
inViewport(el, 100) // true if elem is in the current viewport or within 100px of it
inViewport(el, -100) // true if elem is in the current viewport and not within 99px of the edge
```

## scrollIntoView

```js
import { scrollIntoView } from 'domtool';

scrollIntoView(source, container, config);
```

- options

| params | type | default | description |
| ------- | -------| ------- | ------- |
| source | HTMLElement | - | node wanted to show |
| container | HTMLElement | - | scroll to container |
| config | object | - | config |

- config

| params | type | default | description |
| ------- | -------| ------- | ------- |
| alignWithLeft | Boolean | - | whether align with left edge |
| alignWithTop | Boolean | - | whether align with top edge |
| offsetTop | Number | - | offset top |
| offsetLeft | Number | - | offset left |
| offsetBottom | Number | - | offset bottom |
| offsetRight | Number | - | offset right |
| allowHorizontalScroll | Boolean | - | whether allow horizontal scroll container |
| onlyScrollIfNeeded | Boolean | - | whether scroll container when source is visible |

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