$
and $$
which allows to respectively select one element by id and a full collection of elements by a CSS selector. 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.
$
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.const elBox = document.getElementById('box') const elBoxes = document.querySelectorAll('.boxes') // true, false log(elBox === document.getElementById('box'), elBoxes === document.querySelectorAll('.boxes')
const elBox = $('box') const elBoxes = $$('.boxes') // true, true log(elBox === $('box'), elBoxes === $('.boxes'))
const elBox = document.getElementById('box') elBox.style.backgroundColor = 'green' elBox.innerHTML = 'box content' elBox.addEventListener('click', () => { console.log('box clicked') })
$('box').css('background-color', 'green') .html('box content') .on('click', () => log('box clicked'))
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.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') })
// 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'))
attr
method you can set one or multiple HTML attributes, and with data
method you set one or more data-
attributes.const elBox = document.getElementById('box') elBox.setAttribute('id', 'newBox') elBox.setAttribute('title', 'This is a newBox') elBox.setAttribute('data-text', 'A data text')
$('box').attr({id: 'newBox', title: 'This is a newBox'}) .data('text', 'A data text')
addClass
, toggleClass
, removeClass
and hasClass
methods you can easily work with classes.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
const elBox = $('box') elBox.addClass('classA', 'classB', 'classC') .removeClass('classA') .toggleClass('classB', 'classA') log(elBox.hasClass('classC')) // true
css
method you can set one or multiple CSS property.const elBox = document.getElementById('box') elBox.style.backgroundColor = 'green' elBox.style.color = 'white' elBox.style.borderColor = 'lightblue'
// muliple $('box').css({backgroundColor: 'green', color: 'white', borderColor: 'lightblue'}) // single $('box').css('width', '300px')
width
, height
, backgroundColor
etc.const elBox = document.getElementById('box') elBox.style.backgroundColor = 'green' elBox.style.color = 'white' elBox.style.height = '300px'
$('box').backgroundColor('green').color('white').height('300px')
html
and text
methods you can set the innerHTML and innerText qualities of elements.const elBox = document.getElementById('box') elBox.innerHTML = '<div>Content</div>' elBox.innerText = 'Content'
$('box').html('<div>Content</div>') .text('Content')
getElement
method you can retrieve the original DOM content selected, thus using standard Javascript functionalities.document.getElementById('box').addEventListener('click', () => console.log('clicked')) document.querySelectorAll('.boxes').forEach(el => console.log(el.style.color = 'blue'))
$('box').getElement().addEventListener('click', () => log('clicked')) $$('.boxes').getElement().forEach(el => log(el.style.color = 'blue'))
$$
function allows to select a collection of elements, and apply setters methods to each with no need for iteration.const boxes = document.querySelectorAll('.box') boxes.forEach((box, i) => { box.style.backgroundColor = 'green' box.classList.add('thebox') box.addEventListener('click', () => console.log('clicked')) })
$$('.box').css('background-color', 'green') .addClass('thebox') .click(() => log('clicked'))
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).// 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)
// 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') )
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.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') ) })
const elBox = $('box') log( elBox.getAttr('id') ) log( elBox.getAttr('id', 'title') ) log( $$('.boxes').getAttr('id', 'title') )
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.// 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 )
// 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') )
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.// 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
// 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') )
width
, height
, backgroundColor
etc.const elBox = document.getElementById('box') elBox.style.backgroundColor = 'green' elBox.style.color = 'white' elBox.style.height = '300px'
$('box').backgroundColor('green').color('white').height('300px')
each
method you can iterate through a DOMmy collection.const boxes = document.querySelectorAll('.boxes') boxes.forEach((el, i) => console.log(el.style.backgroundColor))
$$('.boxes').each((el, i) => log( $(el).backgroundColor() ))
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')
.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' } })
// 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
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.// can't be done without CSS
$('box4').fx({ 50: { 'background-color': 'green', }, 100: { width: 0, height: 0, opacity: 0, }, }, { duration: '10s', delay: '1s', easing: 'ease-in-out' } )
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.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)
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)
npm install @thelight/dommyjs