Dom Utilities

find(HTMLElement: element, ?HTMLElement: context = window): HTMLElement|Undefined

Finds first single element by CSS selector and returns it.

let div = find('div');

let id = find('#foo');

let clas = find('.foo.bar');

let child = find('.foo', div);

find_all

Finds all elements by CSS selector and returns array.

find_all(HTMLElement: element, ?HTMLElement: context = window): Array

let divs = find_all('div');

let classes = find_all('.foo.bar');

let children = find_all('.foo', divs[0]);

add_class

Adds class(es) to HTMLElement(s).

add_class(HTMLElement|Array: element, String|Array: className): Void

add_class(element, 'foo');

add_class(element, 'foo, bar');

add_class(element, '.foo.bar');

add_class([element1, element2], ['foo', 'bar']);

remove_class

Removes class(es) to HTMLElement(s).

remove_class(HTMLElement|Array: element, String|Array: className): Void

remove_class(element, 'foo');

remove_class(element, 'foo, bar');

remove_class(element, 'foo.bar');

remove_class([element1, element2], ['foo', 'bar']);

has_class

Checks if an HTMLElement(s) have a class or classes.

has_class(HTMLElement: element, String|Array: className): Boolean

// Has class 'foo'
if (has_class(element, 'foo'))

// Has class 'foo' or 'bar'
if (has_class(element, 'foo, bar'))

// Has class 'foo' or 'bar'
if (has_class(element, ['foo', 'bar']))

// Has class foo and bar
if (has_class(element, '.foo.bar'))

toggle_class

Adds OR removes class(es) to HTMLElement(s).

toggle_class(HTMLElement|Array: element, String|Array: className): Void

// Toggles 'foo'
toggle_class(element, 'foo');

// Toggles 'foo' or 'bar'
toggle_class(element, 'foo, bar');

// Toggles 'foo' and 'bar'
toggle_class(element, '.foo.bar');

// Toggles 'foo' and 'bar' or both elements
toggle_class([element1, element2], ['foo', 'bar']);

attr

Sets, gets or removes any attribute on an HTMLElement.

attr(HTMLElement: element, ?String|Object: nameOrObect, ?Mixed: value): Mixed

// Get values
let id      = attr(element, 'id');
let checked = attr(element, 'checked');
let data    = attr(element, 'data-foo-bar');
let aria    = attr(element, 'aria-hidden');
let styles  = attr(element, 'style');

// Set values
attr(element, 'id', 'foo');
attr(element, 'checked', true);
attr(element, 'data-foo-bar', 'foo');
attr(element, 'aria-hidden', false);
attr(element, 'style', {display: 'block', color: 'red'});
attr(element, 'style', 'display:block; color:red');
attr(element, 'onClick', (e) => alert('Hello world'));

// Remove values
attr(element, 'id', null);
attr(element, 'checked', null);
attr(element, 'data-foo-bar', null);
attr(element, 'aria-hidden', null);
attr(element, 'style', null);
attr(element, 'onClick', null);

css

Set, get or remove CSS value(s) on element. Note that this will only return inline styles, use rendered_style for currently displayed styles.

css(HTMLElement: element, ?String|Object: property, ?Mixed: value): Mixed

// Get inline styles
let display = css(element, 'display');
let cssVar  = css(element, '--foo-bar');

// Set inline styles
css(element, 'display', 'block');
css(element, 'color', 'red !important');
css(element, '--foo-bar', '20px');
css(element, {display: 'block', color: 'red'});

// Remove inline styles
css(element, 'display', false);
css(element, '--foo-bar', false);

rendered_style

Returns currently rendered style attribute of an element.

rendered_style(HTMLElement: element, ?String|Object: property, ?Mixed: value): Mixed

// e.g. 'block'
let display = rendered_style(element, 'display');

// e.g. '20px'
let height = rendered_style(element, 'height');

// e.g. '1.6rem'
let fontSize = rendered_style(element, 'font-size');

height

Returns height in pixels of an element.

height(HTMLElement: element): Integer

let y = height(element);

width

Returns element width in pixels.

width(HTMLElement: element): Integer

let x = width(element);

coordinates

Returns an object of absolute coordinates of element relative to page.

coordinates(HTMLElement: element): Object

/*
{
        top: 10,
        left: 20,
        right: 50,
        bottom: 3000,
        height: 300,
        width: 200,
    };
*/
let position = coordinates(element, '.foo');

dom_element

Creates and returns an HTMLElement via an object of attributes. Attributes can be any HTML attribute to apply to the elem. Passing on[Event] will add an event listener to the element.

dom_element(Object: attributes, ?HTMLElement: appendTo, ?String|Array|HTMLElement: innerHTMLOrChildren): HTMLElement

let container = dom_element({tag: 'div', class: 'container'});

let button = dom_element({tag: 'button', class: 'btn', type: 'button'}, null, 'Hello');

// <div class="container"><span><button class="btn" type="button">Hello</button></span></div>
dom_element({tag: 'span'}, container, [button]);

// <button class="btn" type="button">Hello</button>
let button2 = dom_element({tag: 'button', class: 'btn', type: 'button', innerText: 'Hello'});

// <button class="btn" type="button">Hello</button>
let button3 = dom_element({tag: 'button', class: 'btn', type: 'button', innerHTML: '<span class="fa fa-start"></span>'});

first_children

Returns immediate first children of element.

first_children(HTMLElement: element): Array

let children = first_children(element);

form_inputs

Returns all inputs, textarea and select elements of a form element.

form_inputs(HTMLElement: element): Array

let inputs = form_inputs(element);

form_values

Returns an key/value object of all form input, textarea and select element values.
Values are sanitized and are converted to String Integer Float where appropriate. Form inputs with a name name[] will be concatenated into an Array. Accepts radio and checkbox elements also.

form_values(HTMLElement: element): Object

let form = form_values(formElement);

in_viewport

Returns true if element is in viewport.

in_viewport(HTMLElement: element): Boolean

inner_HTML

Sets innerHTML of an element and clears any old event listeners.

inner_HTML(HTMLElement: element, String|Array: content, ?Boolean: append = false): Void

inner_HTML(element, 'Hello world!');

inner_HTML(element, '<br>More text', true)

input_value

Returns input value of an input, textarea or select element.
Values are sanitized and are converted to String Integer Float where appropriate.
Radio elements will return the input value when checked. Checkbox elements will return a boolean.
File inputs will return a file object or array when multiple is set.

input_value(HTMLElement: element): String|Integer|Float|Boolean

nth_child

Returns nth direct child element of parent element if it exists.

nth_child(HTMLElement: element, Integer: n): HTMLElement|undefined

let first = nth_child(element, 0);
let second = nth_child(element, 1);

sibling_index

Returns index of element relative to it's siblings.

sibling_index(HTMLElement: element): Integer

// <div>1</div>
// <div >2</div>
// <div class="three">3</div>

// returns 2
let position = sibling_index(find('.three'));

preapend

Appends HTMLElement as first child to an element.

preapend(HTMLElement: element, HTMLElement: parent): Void

remove_from_dom

Removes element from DOM and clears any event listeners attached to it.

remove_from_dom(HTMLElement: element): Void

scroll_pos

Returns scroll position of any element or viewport.

scroll_pos(?HTMLElement: element = window): Object

// e.g { top: 20, left: 30 }

// Window
let scroll = scroll_pos();

// element
let scroll = scroll_pos(element);

closest

Traverses up DOM tree to first parent by class name OR tag type and returns element if matched.

closest(HTMLElement: element, String|Array: classNameOrTag): HTMLElement|null

// Div element
let parent = closest(element, 'div');

// 'foo' class
let parent = closest(element, '.foo');

// 'foo' or 'bar' class
let parent = closest(element, '.foo, .bar');
let parent = closest(element, ['.foo', '.bar']);

// 'foo' and 'bar' class
let parent = closest(element, '.foo.bar');

closest_class

Traverses up DOM tree to first parent by class name and returns element if matched.

closest_class(HTMLElement: element, String|Array: className): HTMLElement

// 'foo' class
let parent = closest_class(element, '.foo');

// 'foo' or 'bar' class
let parent = closest_class(element, '.foo, .bar');
let parent = closest(element, ['.foo', '.bar']);

// 'foo' and 'bar' class
let parent = closest(element, '.foo.bar');

next

Traverses forwards through siblings to first element by class name OR tag type and returns element if matched.

next(HTMLElement: element, String|Array: classNameOrTag): HTMLElement|null

let sibling = next(element, 'div');
let sibling = next(element, '.my-class');
let sibling = next(element, ['div', '.my-class']);

next_class

Traverses forwards through siblings to first element by class name and returns element if matched.

next_class(HTMLElement: element, String|Array: className): HTMLElement|null

let sibling = next_class(element, '.foo');
let sibling = next_class(element, ['.foo', '.bar']);

previous

Traverses backwards through siblings to first element by class name OR tag type and returns element if matched.

previous(HTMLElement: element, String|Array: className): HTMLElement|null

// Finds previous div element
let sibling = previous(element, 'div');

// Finds previous div or span element
let sibling = previous(element, 'div, span');
let sibling = previous(element, ['div', 'span']);

// Finds previous element with class 'foo'
let sibling = previous(element, '.foo');

previous_class

Traverses backwards through siblings to first element by class name and returns element if matched.

previous_class(HTMLElement: element, String|Array: className): HTMLElement|null

// Finds previous element with class 'foo'
let sibling = previous_class(element, 'foo');

// Finds previous element with class 'foo' or 'bar'
let sibling = previous_class(element, 'foo, bar');
let sibling = previous_class(element, ['foo', 'bar']);

// Finds previous element with class 'foo' and 'bar'
let sibling = previous_class(element, 'foo.bar');

traverse_up

Traverses up DOM tree and calls callback on each element until callback returns true.

traverse_up(HTMLElement: element, Function: callback): Void

traverse_up(element, (parent) =>
{
    if (has_class(parent, 'foo')) return true;
});

traverse_down

Traverses down DOM tree and calls callback on each element until callback returns true.

traverse_down(HTMLElement: element, Function: callback): Void

traverse_down(element, (child) =>
{
    if (has_class(child, 'foo')) return true;
});

traverse_next

Traverses next siblings and calls callback on each element until callback returns true.

traverse_next(HTMLElement: element, Function: callback): Void

traverse_next(element, (sibling) =>
{
    if (has_class(sibling, 'foo')) return true;
});

traverse_prev

Traverses previous siblings and calls callback on each element until callback returns true.

traverse_prev(HTMLElement: element, Function: callback): Void

traverse_prev(element, (sibling) =>
{
    if (has_class(sibling, 'foo')) return true;
});

trigger_event

Triggers a custom or native DOM event on an element. Custom events are nestable with a colon value.

trigger_event(HTMLElement: element, String: event, ?Object: data = {}): Void

trigger_event(element, 'click');

trigger_event(element, 'foo');

trigger_event(element, 'foo:bar');

// event.detail = { DOMElement: element, name: foo, foo: bar }
trigger_event(element, 'foo', { foo: 'bar' });

let foo = function() {};
foo.prototype.bar = function() {};

// event.detail = { DOMElement: DOMElement, name: eventName, state: foo };
trigger_event(element, 'foo', new foo);