namshi/dollar-dom

Name: dollar-dom

Owner: Namshi

Description: null

Created: 2017-04-11 11:48:39.0

Updated: 2018-05-17 21:02:12.0

Pushed: 2017-08-02 06:30:36.0

Homepage: null

Size: 72

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

?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:

collection = document.querySelectorAll('.some-class');
ection = [].slice.call(collection) // required for older browsers.
ection.forEach( elem => {
em.addEventListener('click', function(){
console.log(this.innerHTML);
; 

can be written as:

.some-class').on('click', function(){ 
onsole.log(this.innerHTML);

and in a better way, with event delegation:

ocument).on('click', '.some-class', function(){ 
onsole.log(this.innerHTML);

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:

rt {$} from 'dollar-dom';

r

t {$} = require('dollar-dom');

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.

  newEl = $(`
   class="parent">
  l class="list">
  <li class="child">1</li>
  <li class="child">2</li>
  <li class="child">3</li>
  <li class="child">4</li>
  <li class="child">5</li>
  ul>
  iv class="section">
  <span class="child">100</div>
  div>
  v>
  
  
  ment.body.appendChild(newEl);
  

• Single element selector ( same as querySelector ):

  Let's try to find the element from the DOM we just created.

  parent = $('.parent');
  ole.log( parent.tagName ) // logs 'DIV'
  

  You can limit the selector to any parent element

  child = $('.child', '.section');
  ole.log( child.tagName ) // logs 'SPAN'
  
  orks with a parent dom element too
  listElement = $('.list').get(0);
  child = $('.child', listElement);
  ole.log( child.tagName ) // logs 'LI'
  

• Multiple elements selector ( same as querySelectorAll ):

  children = $('.child');
  dren.forEach( child => {
  ole.log(child); // Logs LI, LI, LI, LI, LI, SPAN
  
  
  ith a parent
  children = $('.child', '.section');
  dren.forEach( child => {
  ole.log(child); // Logs SPAN
  
  

• 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 the on method ( which is dollarDOM specific ), it will be applied on all elements in the collection – You can see that more in the on section.

  Example:

  out = $('.child', '.list');
  forEach( child => {
  nsole.log(child.innerHTML); // Logs 1, 2, 3, 4, 5
  
  
  innerHTML = 'Hello';
  
  forEach( child => {
  nsole.log(child.innerHTML); // Logs Hello, 2, 3, 4, 5
  
  

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.

  vents will be attached to each .child element
  child').on('click', function(e){
  ole.log( this.textContent ) // NOTE: "this" points to the element clicked. Make sure not to use arrow function as a handler
  ole.log( e ) // mouseClick event
  
  

• Remove event handler:

  The output of the on method is a function which can be used to remove the attached event handlers.

  removeListeners = $('.child').on('click', function(e){
  ole.log( this.textContent );
  
  
  emove attached event handlers
  veListeners();
  

• 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 ).

  nly one event will be attached to the .parent element
  parent').on('click', '.child', function(e){
  ole.log( this.textContent ); // on click of the .child, it's textContent will be logged.
  
  

get

• Get the element from collection:

  get is a utility method to get a single element from the collection. It accept an index argument and the element in that position will be returned.

  collection = $('.child');
  OTE: index starts from 0
  spanElement = collection.get(5);
  ole.log( spanElement.textContent ) // Logs 100
  

Want to Contribute ?

We love contributions from everyone.

1. Fork the repo.
2. Install dependencies. yarn install or npm install
3. We use AVA for unit tests.
   • To run unit tests, yarn test or npm test
   • To run unit test in –watch mode, yarn test-w or npm run test-w
4. Implement the changes, and write test cases. Make sure that all unit test pass.
5. To generate the final build, run yarn build or npm build.
6. Push your code and create a Pull Request

Licence

MIT @ Namshi.com

Image Credits