Util methods to work with DOM.
Warning
All methods has console.warn if passed selector is null or undefined. Doesn't work in minified file utils.min.js
HTML
<button> Click me </button>
<button> I'm awesome </button>JS
let btns = S.find('button')
S.addClass(btns, 'active')
// Or
S.addClass('button', 'active')HTML Result
<button class="active"> Click me </button>
<button class="active"> I'm awesome </button>Returns array of selected elements
S.each(selector, target)let btns = S.find('button')
console.log(btns) // [button, button ... ]
// Find button inside parent
S.find('#parent', 'button')Returns First founded clean DOM element without array.
S.first(selector, [childSelector, callback])let firstButton = S.first('button') // Search in <body>
console.log(btns) // <button>...</button>
// or
let firstButton = S.first('header', button) // Search in <header>
console.log(btns) // <button>...</button>Loops through founded elements and run callback. Inside callback this will be the the link to each element
S.each(selector, callback)let btns = S.find('button')
S.each(btns, doSomething)
// Or
S.each('button', doSomething)
function doSomething(){
console.log( this ) // <button>...</button>
}Add class or array of classes to all founded elements
S.addClass(selector, string|array)// Single class
let btns = S.find('button')
S.addClass(btns, 'active')
S.removeClass(btns, 'active')
S.toggleClass(btns, 'active')
// Array of classes
S.addClass(btns, ['active', 'small'])
S.removeClass(btns, ['active', 'small'])
S.toggleClass(btns, ['active', 'small'])Returns true or false. Works only with FIRST founded element.
S.hasClass(selector)let btnIsActive = S.hasClass('button', 'active')
console.log(btnIsActive) // true or falseAdds event listener on selector.
S.on(selector, method, [target,] callback, [options])S.on('button', 'click', function(){
S.toggleClass(this, 'active') // this - reference to native DOM element
}, false)
// Delegate event
S.on('body', 'click', 'button', function(){
S.toggleClass(this, 'active') // this - reference to native DOM element
}, false)Attention: If device is iPhone or iPad, click event will automaticaly change to touchstart on body, html, document
// Click event will change to touchevent automaticaly on iOS
S.on('body', 'click', function(){
S.toggleClass(this, 'active')
})Dispatches event (native or custom)
S.trigger(selector, event, [object])// Listen for event 'btnClicked'
document.addEventListener('btnClicked', function () {
console.log( 'clicked' );
})
S.on('.btn', 'click', function () {
// Trigger event 'btnClicked'
S.trigger(document, 'btnClicked', {
detail: {
active: true
}
})
})Delegate clicks to body. Using any amount of delegates will create only one event on body
S.bodyOnClick(selector, callback)
// Selector - must be stringS.bodyOnClick('.c1', clickHandler1)
S.bodyOnClick('#c2', clickHandler2)
S.bodyOnClick('[data-c3]', clickHandler3)
function clickHandler1() { console.log('You clicked on Class: ', this) }
function clickHandler2() { console.log('You clicked on ID: ', this) }
function clickHandler3() { console.log('You clicked on DataAttribute: ', this) }Change html inside selector. Data can be text or HTML-like text with tags
S.html(selector, data)S.html(this, 'I am awesome')
S.html(this, '<h1>I am awesome</h1>')Appends / prepends data inside selector. Data can be text or HTML-like text with tags
S.append(selector, data)S.append(this, 'I am awesome')
S.prepend(this, '<h1>I am awesome</h1>')Removes all selected elements from DOM
S.remove(selector)S.remove('button')Returns First elements after / before selector. Works with first founded selector. If nothing found - returns null
S.next(selector) // <element>...</element>
S.prev(selector)S.on('button', 'click', function () {
console.log( S.next(this) ); // <element>...</element>
})Returns array of all elements after / before selector. Works with first founded selector. If nothing found - returns null
S.nextAll(selector) // [element, element, element, ...]
S.prevAll(selector)S.on('button', 'click', function () {
console.log( S.nextAll(this) ); // [element, element, element, ...]
})Returns index of element in parent. Second argument must be string. If second argument is passed, returns element index matched passed argument.
S.index(selector, [string])S.index('button') // 0, 1, 2...Returns siblings of selector in parent. Second argument must be string. If second argument is passed, returns array of elements matched passed argument.
S.siblings(selector, [string])S.siblings('button') // [button, button, ...]Returns true or false
S.is(selector, nodeType|string)S.is('button', '[data-index="0"]') // true or falseReturns closest target|parent element of selector
S.closest(selector, target)S.closest('button', '.parent') // <div class="parent">...</div>Gets or Sets attribute to selector
S.attr(selector, attribute, [data])// Set attribute
S.attr('button', 'data-count', '0')
// Get attribute
S.attr('button', 'data-count') // '0'Gets or Sets property to selector
S.attr(selector, prop, [value])// Set property
S.prop('input', 'checked', true)
// Get property
S.prop('input', 'checked') // trueGets or Sets value of input/textarea
S.attr(selector, data)// Set value
S.val('input', 'I am awesome')
// Get value
S.val('input', 'checked') // 'I am awesome'Triggers slide animation
S.slideOpen(selector, duration)let isOpen = false;
S.on('button', 'click', function(){
if (isOpen) {
S.slideClose('.container', .2)
} else {
S.slideOpen('.container')
}
isOpen = !isOpen
})
// Or
S.on('button', 'click', function(){
S.slideToggle('.container', .4)
})Sets function to global window.App object
S.makeGlobal(fnName, fn)// IIFE
(function(){
let startCoding = function(){
console.log('I am awesome!')
}
S.makeGlobal('startCoding', startCoding)
}())
window.App.startCoding() // I am awesome!