# @pluginjs/dom

> A flexible modern dom js plugin.

Latest version **0.8.10** (published 2022-08-29) · GPL-3.0 license · 0 weekly downloads

## Install

```sh
npm install @pluginjs/dom
pnpm add @pluginjs/dom
yarn add @pluginjs/dom
bun add @pluginjs/dom
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.10 |
| Published | 2022-08-29 |
| First published | 2018-03-13 |
| Weekly downloads | 0 |
| License | GPL-3.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 8 |
| Dependencies | 2 |
| Unpacked size | 93.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Creation Studio Limited |
| Maintainers | thecreation, kaptinlin |

## Links

- npm: https://www.npmjs.com/package/@pluginjs/dom
- Repository: https://github.com/pluginjs/pluginjs
- Homepage: https://pluginjs.com
- Issues: https://github.com/pluginjs/pluginjs/issues
- npm.io page: https://npm.io/package/@pluginjs/dom

## Dependencies (2)

- [@pluginjs/is](https://npm.io/package/@pluginjs/is.md) ^0.8.9
- [@pluginjs/utils](https://npm.io/package/@pluginjs/utils.md) ^0.8.10

## Recent versions

- 0.8.10 (latest) — 2022-08-29
- 0.8.9 — 2022-01-08
- 0.8.8 — 2021-09-26
- 0.8.7 — 2021-07-01
- 0.8.6 — 2021-03-25
- 0.8.5 — 2021-03-01
- 0.8.4 — 2020-07-11
- 0.8.3 — 2020-02-11
- 0.8.2 — 2020-02-11
- 0.7.20 — 2020-01-15
- 0.7.19 — 2019-12-17
- 0.7.18 — 2019-12-16
- 0.7.17 — 2019-09-20
- 0.7.16 — 2019-08-06
- 0.7.15 — 2019-07-22
- … 36 more at https://npm.io/package/@pluginjs/dom/versions

## README

# Dom

[![npm package](https://img.shields.io/npm/v/@pluginjs/dom.svg)](https://www.npmjs.com/package/@pluginjs/dom)

`dom` is a utility JavaScript library for control dom interfaces.

## Introduction
### Installation

#### Yarn

```javascript
yarn add @pluginjs/dom
```

#### NPM

```javascript
npm i @pluginjs/dom
```

## Getting Started

**CDN:**

Development:

```html
<script src="https://unpkg.com/@pluginjs/dom/dist/dom.js"></script>
```

Production:

```html
<script src="https://unpkg.com/@pluginjs/dom/dist/dom.min.js"></script>
```

## API

### query

Alias: parentNode.querySelector

Parameters

| Name | Type | Description |
|||-|
| selector | `String` | CSS selectors |
| parent | `HTMLElement` | Default: `document` |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches. |

### queryAll

Alias: parentNode.querySelectorAll

Parameters

| Name | Type | Description |
|||-|
| selector | `String` | CSS selectors |
| parent | `HTMLElement` | Default: `document` |

Returns

| Name | Type | Description |
|||-|
| elements | `Array<HTMLElement>` | A non-live Array containing one Element object for each element that matches at least one of the specified selectors or an empty Array in case of no matches. |

### find

Just like query, but it is Curried.

### finds

Just like queryAll, but it is Curried.

### remove

Parameters

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### html

Parameters

| Name | Type | Description |
|||-|
| content | `String` | html string |
| element | `HTMLElement` | container |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | container |

### children

Parameters

| Name | Type | Description |
|||-|
| selector | `String` | CSS selectors |
| parent | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| elements | `Array<HTMLElement>` | a Array which contains all of the child elements that matches the specified set of CSS selectors .  |

### siblings

Parameters

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### parent

Parameters

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | parentNode |

### parseHTML

Support tagged template.

Parameters

| Name | Type | Description |
|||-|
| htmlString | `String` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### setData

Parameters

| Name | Type | Description |
|||-|
| key | `String` | |
| value | `Any` | |
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### getData

Parameters

| Name | Type | Description |
|||-|
| key | `String` | |
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### clone

Parameters

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### empty

Parameters

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### prev

Alias: node.previousElementSibling

Parameters

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### next

Alias: node.nextElementSibling

Parameters

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### attr

Parameters

| Name | Type | Description |
|||-|
| args | `String | Object` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### removeAttr

Parameters

| Name | Type | Description |
|||-|
| key | `String` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### data

Parameters

| Name | Type | Description |
|||-|
| args | `String | Object` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### text

Parameters

| Name | Type | Description |
|||-|
| content | `String` | textContent |
| element | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| element | `HTMLElement` | |

### append

Parameters

| Name | Type | Description |
|||-|
| child | `HTMLElement` | childNode |
| el | `HTMLElement` | parentNode |

Returns

| Name | Type | Description |
|||-|
| el | `HTMLElement` | parentNode |

### prepend

Parameters

| Name | Type | Description |
|||-|
| child | `HTMLElement` | childNode |
| el | `HTMLElement` | parentNode |

Returns

| Name | Type | Description |
|||-|
| el | `HTMLElement` | parentNode |

### insertBefore

Parameters

| Name | Type | Description |
|||-|
| newElement | `HTMLElement` | new element |
| el | `HTMLElement` | parentNode |

Returns

| Name | Type | Description |
|||-|
| el | `HTMLElement` | parentNode |

### insertAfter

Parameters

| Name | Type | Description |
|||-|
| newElement | `HTMLElement` | new element |
| el | `HTMLElement` | parentNode |

Returns

| Name | Type | Description |
|||-|
| el | `HTMLElement` | parentNode |

### wrap

Parameters

| Name | Type | Description |
|||-|
| wrapElement | `HTMLElement` | wrapper |
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| wrapElement | `HTMLElement` | wrapper |

### wrapInner

Parameters

| Name | Type | Description |
|||-|
| newElement | `HTMLElement` | new element |
| wrap | `HTMLElement` | wrapper |

Returns

| Name | Type | Description |
|||-|
| wrap | `HTMLElement` | wrapper |

### wrapAll

Parameters

| Name | Type | Description |
|||-|
| wrapElement | `HTMLElement` | wrapper |
| elementList | `Array<HTMLElement>` | |

Returns

| Name | Type | Description |
|||-|
| wrapElement | `HTMLElement` | wrapper |

### unwrap

Parameters

| Name | Type | Description |
|||-|
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| el | `HTMLElement` | |

### parentWith

Parameters

| Name | Type | Description |
|||-|
| fn | `HTMLElement => Boolean` | |
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| el | `HTMLElement` | parentNode |

### clearData

Parameters

| Name | Type | Description |
|||-|
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| el | `HTMLElement` | |

### contains

Parameters

| Name | Type | Description |
|||-|
| el | `HTMLElement` | |
| parent | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| bool | `Boolean` | |

### closest

Parameters

| Name | Type | Description |
|||-|
| selector | `String` | |
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| parentElement | `HTMLElement` | |

### nextWith

Parameters

| Name | Type | Description |
|||-|
| fn | `HTMLElement => Boolean` | |
| el | `HTMLElement` | |

Returns

| Name | Type | Description |
|||-|
| nextElement | `HTMLElement` | |

### fade

Parameters

| Name | Type | Description |
|||-|
| type | `String` | |
| Options | `{ duration: Number, callback: Function }` | |
| element | `HTMLElement` |

Returns

| Name | Type | Description |
|||-|
| nextElement | `HTMLElement` | |

### fadeOut

Parameters

| Name | Type | Description |
|||-|
| Options | `{ duration: Number, callback: Function }` | |
| element | `HTMLElement` |

Returns

| Name | Type | Description |
|||-|
| nextElement | `HTMLElement` | |

### fadeIn

Parameters

| Name | Type | Description |
|||-|
| Options | `{ duration: Number, callback: Function }` | |
| element | `HTMLElement` |

Returns

| Name | Type | Description |
|||-|
| nextElement | `HTMLElement` | |

## Browser support

Tested on all major browsers.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --------- | --------- | --------- | --------- | --------- |
| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions|

## License

@pluginjs/dom is Licensed under [the GPL-v3 license](LICENSE).

If you want to use @pluginjs/dom project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.

For purchase an Commercial License, contact us purchase@thecreation.co.

## Copyright

Copyright (C) 2022 [Creation Studio Limited](creationstudio.com).

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