# dom-funcs

> A very limited subset of dom functions I use every day

Latest version **0.3.0** (published 2016-08-05) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2016-08-05 |
| First published | 2016-03-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jérôme Decoster |
| Maintainers | jeromedecoster |
| Keywords | node, attributes, parse, serialize, load, image, blank, 1x1, gif |

## Links

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

## Dependencies (3)

- [is-funcs](https://npm.io/package/is-funcs.md) ^0.5.1
- [to-funcs](https://npm.io/package/to-funcs.md) ^0.4.0
- [object-funcs](https://npm.io/package/object-funcs.md) ^0.4.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

- 0.3.0 (latest) — 2016-08-05
- 0.2.0 — 2016-08-04
- 0.1.0 — 2016-07-13
- 0.0.0 — 2016-03-30

## README

# dom-funcs

> A very limited subset of dom functions I use every day

## Install

```bash
npm i dom-funcs
```

Package [on npm](https://www.npmjs.com/package/dom-funcs)

## API

* [get-attributes](#getattributesnode-name)
* [load-image](#loadimagesrc-cb-ctx)

## getAttributes(node, name)

Return serialized attributes data filtered by name

| Argument | Action |
| :------ | :------- |
| **node** | the tested **Html Element** `node` |
| **name** | the searched `name`. Match exact name or names followed by `-` |

Return an object

* keys are transform to camelcase
* values are serialized. Number and Boolean are converted
* values can be simple **Math expression** – [see toNumber](https://github.com/jeromedecoster/to-funcs#tonumberdata-fallback)

```html
<div id="ref1" image-src="img.jpg" image-offset="250" image-z-index="1000" image-enabled="true" foo="bar"></div>
```

```js
const getAttributes = require('dom-funcs/get-attributes')

// {src:'img.jpg', offset:250, zIndex:1000, enabled:true}
getAttributes(document.querySelector('#ref1'), 'image')
```

Get `dataset` values

```html
<div id="ref2" data-ref-src="bg.jpg" data-ref-width="320" data-ref-z-index="10" data-foo="bar"></div>
```

```js
const getAttributes = require('dom-funcs/get-attributes')

// {src:'bg.jpg', width:320, zIndex:10}
getAttributes(document.querySelector('#ref2'), 'data-ref')
```

Parse inner datas

```html
<div id="ref3" image-src="img.jpg" image="offset(250) z-index(1000) enabled(true)" foo="bar"></div>
```

```js
const getAttributes = require('dom-funcs/get-attributes')

// {src:'img.jpg', offset:250, zIndex:1000, enabled:true}
getAttributes(document.querySelector('#ref3'), 'image')
```

Using math expression

```html
<div id="ref4" image="x(-.1 + -.2) y(100/250)"></div>
```

```js
const getAttributes = require('dom-funcs/get-attributes')

// {x:-.3, y:.4}
getAttributes(document.querySelector('#ref4'), 'image')
```

## loadImage(src, [cb], [ctx])

Create an image, execute a callback when the loading is done. Fallback with the famous transparent 1x1 gif

| Argument | Action |
| :------ | :------- |
| **src** | the source of the image |
| **cb** | optional callback. Called once the loading is done with the image as first argument |
| **ctx** | optional context of `this`, default to global |

Return the created image

```js
const load = require('dom-funcs/load-image')

function onload(img) {
  // the image `width`
  img.width
}

var el = load('img.jpg', onload)
document.body.appendChild(el)
```

If the image doesn't exists, the returned image is a transparent 1x1 gif

```js
const load = require('dom-funcs/load-image')

function onload(img) {
  // 1
  img.width
}

var el = load('path-to-nothing.jpg', onload)
document.body.appendChild(el)
```

## Thanks

Mainly forked / inspired on
- [load-img](https://github.com/mattdesl/load-img)

## License

MIT

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