# ampersand-dom

> Super light-weight DOM manipulation lib.

Latest version **1.5.0** (published 2016-02-01) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2016-02-01 |
| First published | 2014-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 23 |
| Author | 'Henrik Joreteg' |
| Maintainers | andyet-ops, gar, henrikjoreteg, latentflip, lukekarrys |
| Keywords | dom, binding |

## Links

- npm: https://www.npmjs.com/package/ampersand-dom
- Repository: https://github.com/ampersandjs/ampersand-dom
- Issues: https://github.com/ampersandjs/ampersand-dom/issues
- npm.io page: https://npm.io/package/ampersand-dom

## Dependencies (1)

- [ampersand-version](https://npm.io/package/ampersand-version.md) ^1.0.0

## 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.5.0 (latest) — 2016-02-01
- 1.4.0 — 2015-03-26
- 1.3.0 — 2015-03-26
- 1.2.7 — 2014-11-14
- 1.2.6 — 2014-10-27
- 1.2.5 — 2014-10-22
- 1.2.4 — 2014-10-07
- 1.2.3 — 2014-10-07
- 1.2.2 — 2014-09-04
- 1.2.1 — 2014-07-08
- 1.2.0 — 2014-06-21
- 1.1.0 — 2014-06-13
- 1.0.0 — 2014-06-11
- 0.1.2 — 2014-06-11
- 0.1.1 — 2014-06-06
- … 1 more at https://npm.io/package/ampersand-dom/versions

## README

# ampersand-dom

Minimal util-layer for applying transformations to DOM.

It's a pretty thin layer on top of DOM APIs.

It has zero dependencies.

## install

```
npm install ampersand-dom
```

## falsy values

When setting something to a falsy value: `NaN`, `undefined`, `null`, and `false` all become `''`. However, `0` becomes `"0"` in order to allow setting `0` as the text content of an element.

## example

Here are all the methods and their usage:

```javascript

var dom = require('ampersand-dom');


// sets text content of element
dom.text(el, 'set text content');

// uses classList if available
dom.addClass(el, 'someclass');
dom.hasClass(el, 'someclass'); // => true
dom.removeClass(el, 'someclass');

// removes old if found, adds new
dom.switchClass(el, 'oldclass', 'newclass');

// makes sure attribute (with no content) is added
// if exists it will be cleared of content
dom.addAttribute(el, 'checked');

// returns true if that the element has an attribute with that name
dom.hasAttribute(el, 'checked'); // => true

// completely removes attribute
dom.removeAttribute(el, 'checked');

// sets attribute to string value given, clearing any current value
dom.setAttribute(el, 'value', 'the value');

// sets display none
dom.hide(el);

// hide takes a second parameter which changes
// the css property used to hide the element
// sets visibility hidden
dom.hide(el, 'visibility');

// shows element, trying to determine it's default display state
// based on tagname and getComputedStyle()
dom.show(el);

// show also takes a second parameter which changes
// the css property used to show the element
// sets visibility on element based on its previous value
dom.show(el, 'visibility');

// toggle display of element, between show/hide
dom.toggle(el);

// toggle also takes the same second parameter as show/hide
// which changes the css property used to show or hide
// the element
dom.toggle(el, 'visibility');

// sets inner HTML, takes string or DOM
dom.html(el, '<div></div>');
```

## credits

Initially created by [@HenrikJoreteg](http://twitter.com/henrikjoreteg) with much inspiration/discussion with [@philip_roberts](https://twitter.com/philip_roberts).

## license

MIT

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