ez-dom is a easy library to manipulate the DOM, with a simple API.
Getting started
ez-dom promotes a functional programming (FP) style to manipulate the DOM. Most methods are auto-curried and data-last(dom element(s)).
Curried methods
cap iteratees to one argument:
addClass
append
removeClass
toggleClass
css
html
trigger
setText
Methods that cap iteratees to two argument:
on
Methods that are not curried:
remove
, ready
, show
, hide
, offset
, query
, getText
e.g :
ez.remove(element)
Installation
npm
npm install ez-dom
yarn
yarn add ez-dom
or destructuring
To reduce size all you need is to use bundler with tree shaking support like webpack 2 or Rollup.
You can do imports like below without actually including the entire library content.
Examples
ez
API
query
(selectors: any) => Array<HTMLElement>
Query one or many element.
const el =
ready
(callback: Function) => void
Specify a function to execute when the DOM is fully loaded.
ez
addClass
(classes: string, selectors: Array<HTMLElement>) => Array<HTMLElement>
Adds the specified class(es) to each element in the set of matched elements.
element
append
(html: any, selectors: Array<HTMLElement>) => Array<HTMLElement>
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
element
css
(css: object, selectors: Array<HTMLElement>) => Array<HTMLElement>
Set one or more CSS properties for every matched element.
element
getText
(selectors: Array<HTMLElement>) => string
Get the text of the first element
hide
(selectors: Array<HTMLElement>) => Array<HTMLElement>
Hide the matched elements.
html
(selectors: Array<HTMLElement>) => string
Get the HTML contents of the first element.
const html =
offset
(selectors: Array<HTMLElement>) => Object
Get the current coordinates of the first element.
const offset =
on
(event: string, callback: Function, selectors: Array<HTMLElement>) => Array<HTMLElement>
Attach an event handler function for one or more events to the selected elements.
handleClickdiv
remove
(selectors: Function) => Array<HTMLElement>
Remove the set of matched elements from the DOM.
removeClass
(classes: string selectors: Array<HTMLElement>) => Array<HTMLElement>
Remove a single class, multiple classes, or all classes from each element in the set of matched elements
element
setText
(text: string, selectors: Array<HTMLElement>) => Array<HTMLElement>
Set the text contents of the matched elements.
div
show
(selectors: Array<HTMLElement>) => Array<HTMLElement>
Display the matched elements.
toggleClass
(classes: string, selectors: Array<HTMLElement>) => Array<HTMLElement>
Add or remove one or more classes from each element in the set of matched elements.
div
trigger
({event, detail}: { event: string; detail: Object; }, selectors: Array<HTMLElement> ) => Array<HTMLElement>
Execute all handlers and behaviors attached to the matched elements for the given event type.
element
Placeholder
A special placeholder value used to specify "gaps" within curried functions, allowing partial application of any combination of arguments, regardless of their positions.
e.g:
const addClassOnClick = ez body
Browser support
ez-dom works on modern browsers such as Chrome, Firefox, and Safari.
License
MIT