1.0.6 • Published 6 years ago
xp-dom v1.0.6
xp-dom
A pack to handle dom
Installation
npm i xp-dom --save
Usage
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
on('.box', 'click', fn)off(elem, type, handler)
- remove an event
on('.box', 'click', fn)one(elem, type, hander)
- add an event just once
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
<body></body>
delegate('.box2', 'click', fn)
document.querySelector('.box').classList.add('box2') // click box2 will trigger fnundelegate(selector, type, handler, parent)
- remove delegate
delegate('.box2', 'click', fn)
undelegate('.box2', 'click', fn)
document.querySelector('.box').classList.add('box2') // click box2 will not trigger fnelement
matches(elem, selector)
- returns true if the element would be selected by the specified selector string; otherwise, returns false.
// <div class="box box1"></div>
matches(document.querySelector('.box'), '.box2') // falseclosest(elem, selector)
- returns the closest ancestor of the current element
// <div class="box"><p></p></div>
matches(document.querySelector('p'), '.box') // return the DivElementclasslist
hasClass(elem, className)
- returns ture if element has the className. same as classList.contains.
// <div class="box"></div>
hasClass('div', 'box') // trueaddClass(elem, className)
- add className for element. same as classList.add.
// <div class="box"></div>
addClass('div', 'box2') // <div class="box box2"></div>removeClass(elem, className)
- remove className for element. same as classList.remove.
// <div class="box"></div>
removeClass('div', 'box') // <div class></div>toggleClass(elem, className)
- toggle className for element. same as classList.toggle.
// <div class="box"></div>
toggleClass('div', 'box2') // <div class="box box2"></div>
toggleClass('div', 'box') // <div class></div>itemClass(elem, number)
- returns className by index in collection. same as classList.item.
// <div class="box"></div>
itemClass('div', 0) // box