DOMmy.js Back to Riccardo Degni

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.

Is DOMmy.js a complete framework?

No. If you need a Javascript framework you could choose from a high quality, open-source collection: jQuery, EXT, MooTools and so on.
DOMmy.js is a lightweight library that provides powerful controls for DOM. No Javascript Framework is needed to work with DOMmy.js.

What's 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
• add (multiple) events, storage, CSS properties and attributes to elements
• select elements and collections of elements
• 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.
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('Hey!');
    },
    
    'mouseout': function() {
        log('Hey!');
    }
});

Setting (and getting) properties to elements:

// set html
$('myel').html('new content');

// get an attribute
var title = $('myel').attr('title');

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

// set attributes
$('myel').attr({'title': 'my title', 'alt': 'alternate text'});

Setting (and getting) css properties to elements:

// set css
$('myel').css('display', 'block');

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

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

// get multiple css
$('myel').css(['display', 'color']);

Adding animations to elements:

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

// queue animations
$$('.myel').fx({'width': '300px'}, 2000, callBack, true);
           .fx({'width': '300px'}, 2000, callBack, true);

Element storage:

// set storage
$('myel').set('myVal', myVal);

// multiple storage
$('myel').set({'myVal': myVal, 'mySecondVal': mySecondVal});
$$('div#a, div#b').set('prop', 10);

// get storage
$('myel').get('myVal');
$('a').get('prop'); // 10

Easy chain methods to collection of elements:

// multiple call
$$('#e, #d')
    .fx({'font-size': '40px', 'color': 'yellow'}, 1)
    .fx({'font-size': '10px', 'color': 'red'}, 1)
    .attr('title', 'thed')
    .attr('class', 'thed')
    .attr({'lang': 'en', 'dir': 'ltr'});

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.html('Completed!');
            });
        },
        'mouseout': function() {
            this.fx({'width': '100px'}, 1, function() {
                this.html('Back again!');
            });
        } 
    });
    
    $('demo2').on({
        'click': function() {
            this.css({'width': '300px'})
                .html('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.html('1');
                }, true)
                .fx({'height': '50px', 'background-color': 'yellow', 'border-width': '4px'}, 1, function() {
                    this.html('2');
                }, true)
                .fx({'width': '100px', 'background-color': 'blue', 'border-width': '10px'}, 1, function() {
                    this.html('3');
                }, true)
                .fx({'height': '100px', 'background-color': '#3dac5f', 'border-width': '2px'}, 1, function() {
                    this.html('4');
                    clicked = false;
                }, true); 
            }
        } 
    });
});

Downloading DOMmy.js top

You can download the 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.