top
RD
DOMmy.js is a powerful yet super light Javascript library which allows Javascript developers to write less code while dramatically improving efficiency.
The goal of DOMmy.js is to "enhance" the syntax of Vanilla Javascript, making it more elegant and less verbose, using Vanilla Javascript, with no need for anything else but Vanilla Javascript.
DOMmy.js is a standalone, no-dependency script, meaning you can use it alone or along you favourite framework.
The core of DOMmy.js lies in two functions: $ and $$ which allows to respectively select one element by id and a full collection of elements by a CSS selector.
Once you get your element or element collection, you can use the DOMmy.js methods to seamlessy work with DOM operations.
Setter methods, like html, css, on, attr etc. allow to set data, and are chainable, while getter methods such as getStyle, getCSS, getAttr etc. allow to retrieve data.
70%
less code to write
50%
speed-up writing time
<5,22
kb

Usage

Selecting

You can select either a single element or a collection of elements by using $ and $$ global functions. Even if you may save the result of selections in const variabiles, don't worry about performance issues: DOMmy.js will cache every selection you make and $('box') === $('box'), $$('.boxes') === $$('.boxes') will always be true with reference equality.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

const elBoxes = document.querySelectorAll('.boxes')

// true, false
log(elBox === document.getElementById('box'), elBoxes === document.querySelectorAll('.boxes')

dommyjs DOMmy.js

const elBox = $('box')

const elBoxes = $$('.boxes')

// true, true
log(elBox === $('box'), elBoxes === $('.boxes'))

Element settings

You can set CSS properties, attributes, contents and events simply by chaining setter methods.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.style.backgroundColor = 'green'

elBox.innerHTML = 'box content'

elBox.addEventListener('click', () => {
    console.log('box clicked')
})

dommyjs DOMmy.js

$('box').css('background-color', 'green')
        .html('box content')
        .on('click', () => log('box clicked'))

Event settings

By using the on method you can set both one or many events in one call, moreover you get plenty of shortcut methods (like click, hover etc.) in order to write even less code.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.addEventListener('click', () => {
    console.log('box clicked')
})

elBox.addEventListener('mousemove', () => {
    console.log('box mousemove')
})

elBox.addEventListener('mouseenter', () => {
    console.log('box mousenter')
})

elBox.addEventListener('mouseleave', () => {
    console.log('box mouseleave')
})

dommyjs DOMmy.js

// option 1
$('box').click(() => log('box clicked'))
        .mousemove(() => log('box mousemove'))
        .hover(() => log('box mouseenter'), () => log('box mouseleave'))

// option 2
$('box').on({
            click: () => log('box clicked'), 
            mousemove: () => log('box mousemove')
        })
        .hover(() => log('box mouseenter'), () => log('box mouseleave'))

Attribute settings

By using the attr method you can set one or multiple HTML attributes, and with data method you set one or more data- attributes.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.setAttribute('id', 'newBox')
elBox.setAttribute('title', 'This is a newBox')
elBox.setAttribute('data-text', 'A data text')

dommyjs DOMmy.js

$('box').attr({id: 'newBox', title: 'This is a newBox'})
        .data('text', 'A data text')

Class settings

By using the addClass, toggleClass, removeClass and hasClass methods you can easily work with classes.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.classList.add('classA', 'classB', 'classC')
elBox.classList.remove('classA')
elBox.classList.toggle('classB', 'classA')

console.log(elBox.className.includes('classC')) // true

dommyjs DOMmy.js

const elBox = $('box')

elBox.addClass('classA', 'classB', 'classC')
      .removeClass('classA')
      .toggleClass('classB', 'classA')
    
log(elBox.hasClass('classC')) // true

CSS settings

By using the css method you can set one or multiple CSS property.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.style.backgroundColor = 'green'
elBox.style.color = 'white'
elBox.style.borderColor = 'lightblue'

dommyjs DOMmy.js

// muliple
$('box').css({backgroundColor: 'green', color: 'white', borderColor: 'lightblue'})

// single
$('box').css('width', '300px')

CSS settings shortcuts

You can even shorten code by using CSS setter shortcuts, like width, height, backgroundColor etc.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.style.backgroundColor = 'green'
elBox.style.color = 'white'
elBox.style.height = '300px'

dommyjs DOMmy.js

$('box').backgroundColor('green').color('white').height('300px')

Content settings

By using the html and text methods you can set the innerHTML and innerText qualities of elements.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.innerHTML = '<div>Content</div>'
elBox.innerText = 'Content'

dommyjs DOMmy.js

$('box').html('<div>Content</div>')
        .text('Content')

Vanilla settings

By using the getElement method you can retrieve the original DOM content selected, thus using standard Javascript functionalities.

javascript Vanilla Javascript

document.getElementById('box').addEventListener('click', () => console.log('clicked'))
document.querySelectorAll('.boxes').forEach(el => console.log(el.style.color = 'blue'))

dommyjs DOMmy.js

$('box').getElement().addEventListener('click', () => log('clicked'))
$$('.boxes').getElement().forEach(el => log(el.style.color = 'blue'))

Multi-selecting

The powerful $$ function allows to select a collection of elements, and apply setters methods to each with no need for iteration.

javascript Vanilla Javascript

const boxes = document.querySelectorAll('.box')

boxes.forEach((box, i) => {
    box.style.backgroundColor = 'green'
    box.classList.add('thebox')
    box.addEventListener('click', () => console.log('clicked'))
})

dommyjs DOMmy.js

$$('.box').css('background-color', 'green')
          .addClass('thebox')
          .click(() => log('clicked'))

Getters

Getter method, like getStyle, getCSS, getAttr etc. can be used with both one element ($) or multpile elements ($$). When used with $ they return a value (one argument) or an object with key-value pairings (multiple arguments). When used with $$ they return an array of values (one argument) or objects with key-value pairings (multiple arguments).

javascript Vanilla Javascript

// HTML 
<div id="box"></div>

const elBox = document.getElementById('box')

// 'box'
console.log( box.getAttribute('id') )

// {id: 'box', title: 'the box'}
console.log( {id: box.getAttribute('id'), title: box.getAttribute('title')}  )


// HTML 
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>

const boxes = document.querySelectorAll('.boxes')

const values = []
boxes.forEach((el, i) => {
    values.push((el.getAttribute('id'))
})
// ['box1', 'box2', 'box3']
console.log(values)

const values = []
boxes.forEach((el, i) => {
    values.push({id: el.getAttribute('id'), title: el.getAttribute('title'))
})

// [{id: 'box1', title: 'the box 1'}, {id: 'box2', title: 'the box 2'}, {id: 'box3', title: 'the box 3'}]
console.log(values)

dommyjs DOMmy.js

// HTML 
<div id="box"></div>

const box = $('box')

// 'box'
log( box.getAttr('id') )

// {id: 'box', title: 'the box'}
log( box.getAttr('id', 'title') )


// HTML 
<div id="box1" class="boxes"></div>
<div id="box2" class="boxes"></div>
<div id="box3" class="boxes"></div>

const boxes = $('.boxes')

// ['box1', 'box2', 'box3']
log( boxes.getAttr('id') )

// [{id: 'box1', title: 'the box 1'}, {id: 'box2', title: 'the box 2'}, {id: 'box3', title: 'the box 3'}]
log( boxes.getAttr('id', 'title') )

Get attributes

The getAtt methods retrieves HTML attributes. With one argument you get a string value, while with multiple arguments you get an object with attr: value. The data method retrieves data- attributes.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

console.log( elBox.getAttribute('id') )
console.log( {id: elBox.getAttribute('id'), title: elBox.getAttribute('title')}  )

document.querySelectorAll('.boxes').forEach((el, i) => {
    console.log( el.getAttribute('id') )
})

dommyjs DOMmy.js

const elBox = $('box')

log( elBox.getAttr('id') )
log( elBox.getAttr('id', 'title') )

log( $$('.boxes').getAttr('id', 'title') )

Get styles

The getStyle methods retrieves CSS which has been set up with style attribute. With one argument you get a string value, while with multiple arguments you get an object with cssProperty: cssValue pairings.

javascript Vanilla Javascript

// HTML
<div id="box" style="background-color: #ff00ff; border: 1px solid blue"></div>

const elBox = document.getElementById('box')

// '#ff00ff'
console.log( elBox.style.backgroundColor )

// '#ff00ff', '1px solid blue'
console.log( elBox.style.backgroundColor, elBox.style.border )

dommyjs DOMmy.js

// HTML
<div id="box" style="background-color: #ff00ff; border: 1px solid blue"></div>

const elBox = $('box')

// '#ff00ff'
log( elBox.getStyle('background-color') )

// {backgroundColor: '#ff00ff', border: '1px solid blue'}
log( elBox.getStyle('background-color', 'border') )

Get computed styles

The getCSS methods retrieves computed CSS. With one argument you get a string value, while with multiple arguments you get an object with cssProperty: cssValue pairings.

javascript Vanilla Javascript

// HTML
<div id="box" class="thebox"></div>

// CSS
.thebox {background-color: #ff00ff; border: 1px solid blue;}

const elBox = document.getElementById('box')

// involves several steps using window.getComputedStyle

dommyjs DOMmy.js

// HTML
<div id="box" class="thebox"></div>

// CSS
.thebox {background-color: #ff00ff; border: 1px solid blue;}

const elBox = $('box')

// #ff00ff
log( elBox.getCSS('background-color') )

// {backgroundColor: '#ff00ff', border: '1px solid blue'}
log( elBox.getCSS('background-color', 'border') )

CSS settings shortcuts

You can even shorten code by using CSS setter shortcuts, like width, height, backgroundColor etc.

javascript Vanilla Javascript

const elBox = document.getElementById('box')

elBox.style.backgroundColor = 'green'
elBox.style.color = 'white'
elBox.style.height = '300px'

dommyjs DOMmy.js

$('box').backgroundColor('green').color('white').height('300px')

Iterating

By using the each method you can iterate through a DOMmy collection.

javascript Vanilla Javascript

const boxes = document.querySelectorAll('.boxes')

boxes.forEach((el, i) => console.log(el.style.backgroundColor))

dommyjs DOMmy.js

$$('.boxes').each((el, i) => log( $(el).backgroundColor() ))

Filtering

The at method allows to retrieve either one element at a specific position (when an 1-based index is provided) or N elements when a specific condition is met. The even and odd methods are shortcuts for at('even') and at('odd').

javascript Vanilla Javascript

document.querySelectorAll('.boxes').forEach((el, i) => {
    // the second element will be blue
    if(i+1 == 2) 
        el.style.backgroundColor = 'blue'
    
    // only even elements will get colored and filled with content
    if(i+1 % 2 == 0) {
        el.style.backgroundColor = 'lightblue'
        el.style.innerHTML = 'even element'
    }

    // only odd elements will get colored and filled with content
    if(i+1 % 2 != 0) {
        el.style.backgroundColor = 'lightpink'
        el.style.innerHTML = 'odd element'
    }
})

dommyjs DOMmy.js

// the second element will be blue
$$('.boxes').at(2).backgroundColor('blue');

// only even elements will get colored and filled with content
$$('.boxes').at('even')
            .backgroundColor('lightblue')
            .html('even element');

// only odd elements will get colored and filled with content
$$('.boxes').at('odd')
            .backgroundColor('lightpink')
            .html('odd element');

FX/Animations

You can create powerful CSS animations through the fx method. The first argument is an object with step: css pairings, the optional second argument is an object indicating animation options, like duration, easing etc. Animations are cached to maximize performance, so if you use the same CSS and options settings, you get the same animation object.

javascript Vanilla Javascript

// can't be done without CSS

dommyjs DOMmy.js

$('box4').fx({
    50: {
      'background-color': 'green',
    },

    100: {
      width: 0,
      height: 0,
      opacity: 0,
    },
  },
  { duration: '10s', delay: '1s', easing: 'ease-in-out' }
)

Making elements

You can create HTML elements easily, with attributes, contents, classes, events and CSS styles, in a single step. The constructors take HTML elements' names, such as Div, Section, Ul etc. These constructors return DOMmy instances, so you can use DOMmy methods with them. The addChild method allows to add a new DOM node to a element.

javascript Vanilla Javascript

const div = document.createElement('div')

div.innerHTML = 'Div'

div.setAttribute('id', 'myDiv')

div.classList.add('mydiv', 'mydiv2')

div.style.backgroundColor = 'green'

div.style.padding = '10px'

div.addEventListener('click', () => console.log('div clicked'))

document.getElementyById('box').appendChild(div)

dommyjs DOMmy.js

const div = new Div({
  html: 'Div',
  attrs: {
    id: 'mydiv',
  },
  classes: ['mydiv', 'mydiv2'],
  css: {
    backgroundColor: 'green',
    padding: '10px',
  },
  on: {
    click: () => log('div clicked')
  }
});

$('box').addChild(div)

Download

You can download the current, stable uncompressed version of DOMmy.js and the minified version.
You can download the NPM version through:
npm install @thelight/dommyjs
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.