Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/excaliburhan/xp-dom
A pack to handle dom
https://github.com/excaliburhan/xp-dom
dom javascript library
Last synced: 8 days ago
JSON representation
A pack to handle dom
- Host: GitHub
- URL: https://github.com/excaliburhan/xp-dom
- Owner: excaliburhan
- Created: 2017-03-20T09:34:37.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-26T02:30:14.000Z (about 7 years ago)
- Last Synced: 2024-12-30T08:36:30.684Z (about 1 month ago)
- Topics: dom, javascript, library
- Language: JavaScript
- Size: 49.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# xp-dom
A pack to handle dom
## Installation
> npm i xp-dom --save
## Usage
```js
import { on, off } from 'xp-dom'
// var on = require('xp-dom').on
function say() { console.log(1) }
let div = document.querySelector('.box')
on(div, 'click', say)
// on('.box', 'click', say)
off(div, 'click', say)
```
## API
### event
#### on(elem, type, handler)
- attach an event
```js
on('.box', 'click', fn)
```
#### off(elem, type, handler)
- remove an event
```js
on('.box', 'click', fn)
```
#### one(elem, type, hander)
- add an event just once
```js
one('.box', 'click', fn)
```
#### delegate(selector, type, handler, parent)
- delegate an event whenever the dom exsists or not, use event buble, so not all types event are supported.
- selector cant be DOMElemnt.
- parent default is ``
```js
delegate('.box2', 'click', fn)
document.querySelector('.box').classList.add('box2') // click box2 will trigger fn
```
#### undelegate(selector, type, handler, parent)
- remove delegate
```js
delegate('.box2', 'click', fn)
undelegate('.box2', 'click', fn)
document.querySelector('.box').classList.add('box2') // click box2 will not trigger fn
```
### element
#### matches(elem, selector)
- returns true if the element would be selected by the specified selector string; otherwise, returns false.
```js
//
matches(document.querySelector('.box'), '.box2') // false
```
#### closest(elem, selector)
- returns the closest ancestor of the current element
```js
//
matches(document.querySelector('p'), '.box') // return the DivElement
```
### classlist
#### hasClass(elem, className)
- returns ture if element has the className. same as classList.contains.
```js
//
hasClass('div', 'box') // true
```
#### addClass(elem, className)
- add className for element. same as classList.add.
```js
//
addClass('div', 'box2') //
```
#### removeClass(elem, className)
- remove className for element. same as classList.remove.
```js
//
removeClass('div', 'box') //
```
#### toggleClass(elem, className)
- toggle className for element. same as classList.toggle.
```js
//
toggleClass('div', 'box2') //
toggleClass('div', 'box') //
```
#### itemClass(elem, number)
- returns className by index in collection. same as classList.item.
```js
//
itemClass('div', 0) // box
```