util.js Documentation

DOM Selection and Manipulation

util.one(selector, parent)

Selects the first matching element.

util.one('.btn')

util.all(selector, parent)

Selects all matching elements.

util.all('li')

util.html(el, html)

Gets or sets inner HTML.

util.html(el, '<strong>Hi</strong>')

util.text(el, text)

Gets or sets inner text.

util.attr(el, name, value)

Gets or sets an attribute.

util.attr(el, 'href', 'https://')

util.prop(el, name, value)

Gets or sets a property.

util.val(el, value)

Gets or sets input value.

util.data(el, key, value)

Gets or sets data- attributes.

Class and Style Utilities

util.addClass(el, className)

Adds class(es).

util.addClass(el, 'active')

util.removeClass(el, className)

Removes class(es).

util.toggleClass(el, className)

Toggles class(es).

util.hasClass(el, className)

Checks for class existence.

util.css(el, styles)

Applies inline styles.

util.css(el, { color: 'red' })

DOM Creation

util.create(tag, attrs)

Creates an element.

util.create('button', { class: 'btn', text: 'Click' })

Event Handling

util.on(el, event, handler): Adds an event listener.
util.off(el, event, handler): Removes an event listener.
util.once(el, event, handler): Adds an event listener that runs once.

DOM Traversal

util.parent(el, selector): Finds a parent by selector.
util.closest(el, selector): Finds the closest ancestor by selector.
util.children(el, selector): Finds matching children.
util.find(el, selector): Finds matching descendants.

Form Utilities

util.serialize(form): Converts form to key-value object.

Visibility and Effects

util.show(el), util.hide(el): Toggle visibility with display block/none.
util.toggle(el): Toggle display between none/block.
util.fadeIn(el, duration), util.fadeOut(el, duration): Fade in/out effects.

UI Components

util.ui.modal(options)

Shows a modal. Example:

util.ui.modal({ title: 'Hello', content: 'This is a modal' })

util.ui.toast(message, options)

Shows a toast message.

util.ui.toast('Saved!')

Utility Helpers

util.debounce(fn, delay): Delays execution after user stops triggering.
util.throttle(fn, delay): Ensures function runs at most once per delay.
util.randomId(prefix): Generates a random string ID.
util.copyText(text): Copies text to clipboard.

Storage

util.store.set(key, value): Sets value in localStorage.
util.store.get(key): Gets value from localStorage.
util.store.remove(key): Removes key from localStorage.

Dynamic Loading

util.loadScript(src): Loads JavaScript dynamically.
util.loadStyle(href): Loads CSS file dynamically.