DOMmy.js Back to Riccardo Degni

A super lightweight, modern-featured and standalone Javascript library to work with DOM and enhance Vanilla Javascript

Version 2.0 is OUT!

Try DOMmy.Cycle.js and have fun!

What is DOMmy.js? top

As you could guess from the above description, DOMmy.js is a standalone (no Javascript Framework needed) Javascript library to work easily with DOM.
I developed DOMmy.js because I wanted to include something very light in my webpages, and at the same time I wanted to challenge my scripting skills.
Vanilla Javascript (latest ECMA specifications) is really great, but a bit verbose and tediuous to write, and it lacks a native animation API.
The goal of DOMmy.js is to enhance Vanilla Javascript, using Vanilla Javascript, with no need for anything else but Vanilla Javascript.

Is DOMmy.js a complete framework?

No. If you need a complete Javascript framework you could choose from a high quality, open-source collection you can browse online.
DOMmy.js is a lightweight library that provides powerful controls for DOM and allows the developer to write enhanced native/Vanilla Javascript code having fun. No Javascript Framework is needed to work with DOMmy.js.
In fact DOMmy.js is pure Vanilla Javascript.

What are the features of DOMmy.js?

DOMmy.js is cross-browser, super-lightweight (it weights only 4kb!), super-easy to learn, super-fast to execute.
Moreover, writing code with DOMmy.js is also super-fast. With DOMmy.js you can:
  • navigate throughout the DOM
  • create powerful CSS3 animations and collections of animations. This is the masterpiece of DOMmy.js! A lightweight engine for animations that uses the powerful CSS3 engine within Javascript! You can chain animations with different durations and callbacks, and you can overwrite them to create high-quality effects!
  • add (multiple) events, storage, CSS properties and attributes to elements
  • select elements and collections of elements
  • produce modern (Fetch-like) AJAX requests and HTML Elements with a syntax sugar
  • work with a coherent this structure
  • have a DOMReady fashion
DOMmy.js is designed to be modern and future-oriented, so very old browser versions are NOT supported.
DOMmy.js works with HTML5, CSS3 and the last programming standards, so I didn't care if IE6-7-8 won't work. It supports, of course, all the latest stable versions of the major browsers: Google Chrome, Mozilla Firefox, Opera, Safari and Internet Explorer/Edge.
It has an active development due to fact that it is currently being used as a core component in many of my private projects.

Using DOMmy.js top

Using DOMmy.js is very simple. You can find an exaustive documentation in the uncompressed version of DOMmy.js which is all you need to work with the library in a matter of minutes.
However the following are some examples:

DOMReady tool:
// when the DOM is ready, execute fn
$$$( fn );
Selecting elements:
// select an element by ID
$('myel');

// select a collection of elements by css selector
$$('#myid div.myclass p');
Adding events to elements:
// add an event to an element
$('myel').on('click', function() {
    log('Hey!');
});

// add a events to an element
$$('#myel p').on(
    'click': function() {
        log('Click!');
    },

    'mouseout': function() {
        log('Over!');
    }
});

// mouse-over and mouse-out
$$('#myel p').hover(
    function() {
        log('Over!');
    },

    function() {
        log('Out!');
    }
);
Work with classes:
// add two classes
$('myel').addClass('classA', 'classB');

// toggle two classes
$('myel2').toggleClass('classA', 'classB');
Send AJAX Fetch-like requests:
// get request
$('myel').ajax('https://randomuser.me/api/?results=10',
  function(data) {
    console.log(data);
    this.style.background = 'red'; // or use 'setCss' method
    return JSON.stringify(data);
  }, function(error) {
    console.log('error!');
});
Setting (and getting) properties to elements:
// append html
$('myel').setHtml('new content', 'a');

// get an attribute
let title = $('myel').getAttr('title');

// get multiple attributes
// {'title': 'my title', 'lang': 'en'}
let title = $('myel').getAttr('title', 'lang');

// set an attribute
$('myel').setAttr('title', 'my title');

// set attributes
$('myel').setAttr({'title': 'my title', 'alt': 'alternate text'});
Setting (and getting) css properties to elements:
// set css
$('myel').setCss('display', 'block');

// set multiple css
$('myel').getCss({'display': 'block', 'color': 'white'});

// get css
$('myel').getCss('display');

// get multiple css
// {'display': 'block', 'color': '#fffff'}
$('myel').getCss('display', 'color');
Setting relative CSS values:
$('myel').setCss('width', '+=200px');

$('myel').setCss('height', '-=200px');
Setting (and getting) properties to elements using shortcuts:
// get width
$('myel').getWidth();

// set height
$('myel').setHeight('100px');
Adding animations to elements:
let callBack = function() {
  this.setHtml('Completed!');
}

let callBack2 = function() {
  this.setHtml('Back here again!');
}

// simple animation
$('myel').fx([{'width': '300px'}, 2, callBack]);

// queue animations on multiple elements, with different durations and callbacks
$$('.myel').fx([{'width': '300px'}, 2, callBack]
               [{'width': '50px'}, 4, callBack2]);
Element storage:
// set storage
$('myel').set('myVal', myVal);

// multiple storage on single element
$('myel').set({'myVal': myVal, 'mySecondVal': mySecondVal});

// set storange on a collection of elements
$$('div#a, div#b').set('prop', 10);

// get storage
$('myel').get('myVal');
$('a').get('prop'); // 10
Element storage with 'data' shorthand:
// set storage
$('myel').data('myVal', myVal);

// multiple storage on single element
$('myel').data({'myVal': myVal, 'mySecondVal': mySecondVal});

// set storange on a collection of elements
$$('div#a, div#b').data('prop', 10);

// get storage
$('a').data('prop'); // 10
Check the type of variables... safely:
var x = [1,2,3];
var y = {'x': 'x'};
var z = new Date();
var w;
var j = undefined;
var k = null;
var s = [];

console.log(
  typeOf(x),  // 'array'
  typeOf(y),  // 'object'
  typeOf(z),  // 'date'
  typeOf(w),  // 'undefined'
  typeOf(j),  // 'undefined'
  typeOf(k),  // 'null'
  typeOf(s)   // 'array'
);
Create elements (and optionally append it to another element) in no time:
let myEl = Dommy.Element('div', {
  'attr': {'id': 'myDiv'},
  'css': {'width': '100px', 'height': '100px', 'background-color': 'blue'},
  'events': {'click': function() {alert('hello!')}},
  'appendTo': document.body
});
Easy chain methods to collection of elements:
// multiple call
$$('#e, #d')
  .fx([{'font-size': '40px', 'color': 'yellow'}],
      [{'font-size': '10px', 'color': 'red'}])
  .setAttr('title', 'theclass')
  .setAttr({'lang': 'en', 'dir': 'ltr'})
  .set('someProp', 'someValue');

Installation top

Installing DOMmy.js is very simple, just add the library and here you go:
<script src="http://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script>
    // do some DOMmy stuff
    $$$(function() {
        // ...
    });
</script>

A simple demo top

This is a very basic usage of DOMmy.js:
$$$(function() {
    $('demo1').on({
        'mouseover': function() {
            this.fx([{'width': '300px'}, 1, function() {
                this.setHtml('Completed!');
            }]);
        },
        'mouseout': function() {
            this.fx([{'width': '100px'}, 1, function() {
                this.setHtml('Back again!');
            }]);
        }
    });

    $('demo2').on({
        'click': function() {
            this.setCss({'width': '300px'})
                .setHtml('Done!');
        }
    });

    var clicked = false;
    $('demo3').on({
        'click': function() {
            if( !clicked ) {
                clicked = true;
                this.fx(
                  [{'width': '300px', 'height': '300px', 'background-color': 'red', 'border-width': '10px'}, 1, function() {
                    this.setHtml('1')
                  }],

                  [{'height': '50px', 'background-color': 'yellow', 'border-width': '4px'}, 1, function() {
                    this.setHtml('2')
                  }],

                  [{'width': '100px', 'background-color': 'blue', 'border-width': '10px'}, 1, function() {
                      this.setHtml('3')
                    }],

                  [{'height': '100px', 'background-color': '#3dac5f', 'border-width': '2px'}, 1, function() {
                      this.setHtml('4');
                      clicked = false;
                  }]
                );
            }
        }
    });

    $('demo4').on('click', function() {

      $('demo4').ajax('dommy-ajax-demo.json',
        function(data) {
          this.setCss('background', '#F2F2F2')
              .setHtml(JSON.stringify(data, undefined, 2));
        }, false, false, false);

    });
});

Download DOMmy.js top

You can download the current, stable uncompressed version of DOMmy.js and the minified version.

Author and License top

DOMmy.js is developed by Riccardo Degni and it is released under the MIT License.
If you need support, have any question or want to get in touch with me, feel free to send me a mail.