💲DOM
👬 A Friendly wrapper for your favourite DOM Apis ✨ in 800 bytes ( minified + gzipped ) 🙌
Why
DollarDOM is not a polyfill or a new dom library. It's a simple wrapper for these mostly used DOM APIs:
- createElement
- querySelector
- querySelectorAll
- addEventListener
DollarDOM abstracts the above methods and provides a $
object ( jQuery style ). It also has an on
method which can be chained with the $
selector function. Here is a simple example:
var collection = document;collection = slice // required for older browsers.collection;
can be written as:
;
and in a better way, with event delegation:
;
In bullet points, you can use DollarDOM, if:
- you want a jQuery style API to manage DOM selectors and event handling
- you need to use Event Delegation
- you need to generate DOM from string
- need to avoid the boilerplate code for above mentioned DOM APIs
Install
using npm
npm install --save dollar-dom
using yarn
yarn add dollar-dom
If you're using module bundlers like webpack, Browserify or rollup, you can import $
from DollarDom module:
; // or const $ = ;
If you wish to include as a script, DollarDOM can be included like this:
<script src="https://unpkg.com/dollar-dom/build/dollar-dom.min.js"></script>
and will be available as a global object named dollarDom
in the browser.
API and Examples
$
-
Create DOM from string:
Generating DOM from string is simple.
let newEl =documentbody; -
Single element selector ( same as querySelector ):
Let's try to find the element from the DOM we just created.
let parent = ;console // logs 'DIV'You can limit the selector to any parent element
let child = ;console // logs 'SPAN'// works with a parent dom element toolet listElement = ;let child = ;console // logs 'LI' -
Multiple elements selector ( same as querySelectorAll ):
let children = ;children;// with a parentlet children = ;children; -
Difference between a collection and a single element selector:
By default,
$
returns a collection. But you can call any DOM element method on it, and it will be applied on the first element of the collection. However, if you call theon
method ( which is dollarDOM specific ), it will be applied on all elements in the collection -- You can see that more in theon
section.Example:
let out = ;out;outinnerHTML = 'Hello';out;
on
-
Attach event handler:
$
makes attaching the event handler a lot easy. If you're coming from the jQuery world, there won't be any surprices.// Events will be attached to each .child element; -
Remove event handler:
The output of the
on
method is a function which can be used to remove the attached event handlers.let removeListeners =;// remove attached event handlers; -
Event Delegation example:
In the above examples, the 'click' event will be attached in each
.child
element. This is not performance friendly. DollarDOM has built-in event delegation support ( The syntax is similar to jQuery event delegation ).// Only one event will be attached to the .parent element;
get
-
Get the element from collection:
get
is a utility method to get a single element from the collection. It accept anindex
argument and the element in that position will be returned.let collection = ;// NOTE: index starts from 0let spanElement = collection;console // Logs 100
Want to Contribute ?
We love contributions from everyone.
- Fork the repo.
- Install dependencies.
yarn install
ornpm install
- We use
AVA
for unit tests.- To run unit tests,
yarn test
ornpm test
- To run unit test in --watch mode,
yarn test-w
ornpm run test-w
- To run unit tests,
- Implement the changes, and write test cases. Make sure that all unit test pass.
- To generate the final build, run
yarn build
ornpm build
. - Push your code and create a Pull Request
Licence
MIT @ Namshi.com
Image Credits