Dom

dom#

Arguments:

  • selector String Node Nodelist Array Dom HTML
  • context (optional) String Node

Returns: Dom

Wrap a node or nodes to Dom collection.

let $node = this.dom('#id');
let $node = this.dom('<span>');
let $nodes = this.dom('a', '#in-my-context');

length#

Returns: Number

Get the number of nodes in the Dom collection.

let $nodes = this.dom('a');
let len = $nodes.length;

add#

Arguments:

  • node Node Nodelist Dom

Add a node or nodes to the Dom collection.

let anotherNode = document.createElement('a');
let $nodes = this.dom('a');
$nodes.add(anotherNode);

get#

Arguments:

  • index Number

Return: Node

Return the node at the specified index.

let $nodes = this.dom('a');
let node = $nodes.get(); // by default index is 0
let node = $nodes.get(1);

getAll#

Return: Array

Return the array off all nodes in the Dom collection.

let $nodes = this.dom('a');
let nodes = $nodes.getAll();

eq#

Arguments:

  • index Number

Return: Dom

Return a collection containing only the one at the specified index.

let $nodes = this.dom('a');
let $node = $nodes.eq(2);

first#

Return: Dom

Return the first Dom element from collection.

let $nodes = this.dom('a');
let $node = $nodes.first();

last#

Return: Dom

Return the last Dom element from collection.

let $nodes = this.dom('a');
let $node = $nodes.last();

contents#

Return: Object

Return child nodes of each element in the Dom collection.

let $node = this.dom('#id');
let contents = $node.contents();

each#

Arguments:

  • callback Function

Return: Dom

Execute a function for each element in the collection.

let $nodes = this.dom('a');
$nodes.each(function($node) {
    $node.css('color', 'red');
});

is#

Arguments:

  • selector String Node

Return: Boolean

Check if the node or nodes matches the selector, node or Dom.

let $node = this.dom('a');
let is = $node.is('a')

filter#

Arguments:

  • selector String Function

Return: Dom

Filter the Dom collection by selector or function.

let $nodes = this.dom('a');
$nodes.filter(function($node) {
    return $node.attr('rel')
});

not#

Arguments:

  • selector String

Return: Dom

Remove some nodes from the Dom collection by the specified selector.

let $nodes = this.dom('a');
$nodes.not('.active-class');

find#

Arguments:

  • selector String

Return: Dom

Find child nodes for each elements in the Dom collection.

let $nodes = this.dom('a');
let $spans = $nodes.find('span');

children#

Arguments:

  • selector (optional) String

Return: Object

Return children of each element in the Dom collection.

let $node = this.dom('#id');
let children = $node.children();
let children = $node.children('.active-class');

parent#

Arguments:

  • selector (optional) String

Return: Dom

Return the parent element for each element in the Dom collection.

let $node = this.dom('#id');
let $parent = $node.parent();

parents#

Arguments:

  • selector (optional) String
  • context (optional) String Node

Return: Dom

Return all parents elements for each element in the Dom collection.

let $node = this.dom('#id');
let $parents = $node.parents();

closest#

Arguments:

  • selector (optional) String
  • context (optional) String Node

Return: Dom

Return the closest elements matching the selector (starting by itself) for each element in the Dom collection.

let $node = this.dom('#id');
let $closest = $node.closest('div');

next#

Return: Dom

Return the next sibling of each element in the Dom collection.

let $node = this.dom('#id');
let $next = $node.next();

nextElement#

Return: Dom

Return the next sibling element (not text node) of each element in the Dom collection.

let $node = this.dom('#id');
let $next = $node.nextElement();

prev#

Return: Dom

Return the previous sibling of each element in the Dom collection.

let $node = this.dom('#id');
let $prev = $node.prev();

prevElement#

Return: Dom

Return the previous sibling element (not text node) of each element in the Dom collection.

let $node = this.dom('#id');
let $prev = $node.prevElement();

css#

Arguments:

  • key String Object
  • value String Number

Get the style value of the first element in the Dom collection or set one or more properties to each element in the collection.

let $node = this.dom('#id');
let color = $node.css('color');
$node.css('color', 'red');
$node.css({ 'color': 'red', 'font-weight': 'bold' });

attr#

Arguments:

  • key String Object
  • value String Number

Get the attribute value of the first element in the Dom collection or set one or more attributes to each element in the collection.

let $node = this.dom('#id');
let rel = $node.attr('rel');
$node.attr('rel', 'value');
$node.attr({ 'rel': 'value', 'another-attr': 'value' });

data#

Arguments:

  • key String Object
  • value String Number

Get the data attribute value of the first element in the Dom collection or set one or more data attributes to each element in the collection.

let $node = this.dom('#id');
let val = $node.data('key');
$node.data('key', 'value');
$node.data({ 'key': 'value', 'another-key': 'value' });

val#

Arguments:

  • value String Number

Get the value from the first element or set the value to each element in the Dom collection.

let $node = this.dom('#id');
let val = $node.val();
$node.val('value');

removeAttr#

Arguments:

  • key String

Remove the attribute from each element in the Dom collection.

let $node = this.dom('#id');
$node.removeAttr('rel');

addClass#

Arguments:

  • class String

Add the specified class to each element in the Dom collection.

let $node = this.dom('#id');
$node.addClass('my-class');
$node.addClass('my-class another-class');

removeClass#

Arguments:

  • class String

Remove the specified class from each element in the Dom collection.

let $node = this.dom('#id');
$node.removeClass('my-class');
$node.removeClass('my-class another-class');

toggleClass#

Arguments:

  • class String

Toggle the specified class of each element in the Dom collection.

let $node = this.dom('#id');
$node.toggleClass('my-class');
$node.toggleClass('my-class another-class');

hasClass#

Arguments:

  • class String

Returns: Boolean

Check if the element in the Dom collection has the specified class.

let $node = this.dom('#id');
let has = $node.hasClass('my-class');

empty#

Set the html content is empty to each element in the Dom collection.

let $node = this.dom('#id');
$node.empty();

html#

Arguments:

  • html String

Returns: String

Get the html content from the first element or set the html to each element in the Dom collection.

let $node = this.dom('#id');
let html = $node.html();
$node.html('<b>my html</b>');

text#

Arguments:

  • text String

Returns: String

Get the text content from the first element or set the text to each element in the Dom collection.

let $node = this.dom('#id');
let text = $node.text();
$node.text('my text');

after#

Arguments:

  • element String Node Nodelist Dom

Place element or html after each element in the Dom collection.

let element = document.createElement('span');
let $node = this.dom('#id');
$node.after(element);
$node.after('<b>my html</b>');

before#

Arguments:

  • element String Node Nodelist Dom

Place element or html before each element in the Dom collection.

let element = document.createElement('span');
let $node = this.dom('#id');
$node.before(element);
$node.before('<b>my html</b>');

append#

Arguments:

  • element String Node Nodelist Dom

Append element or html to each element in the Dom collection.

let element = document.createElement('span');
let $node = this.dom('#id');
$node.append(element);
$node.append('<b>my html</b>');

prepend#

Arguments:

  • element String Node Nodelist Dom

Place element or html at the beginning of each element in the Dom collection.

let element = document.createElement('span');
let $node = this.dom('#id');
$node.prepend(element);
$node.prepend('<b>my html</b>');

wrap#

Arguments:

  • html String

Wrap each element in the Dom collection with the specified html tag.

let $node = this.dom('#id');
$node.wrap('<h1>');

unwrap#

Remove the parent element from each element in the Dom collection.

let $node = this.dom('#id');
$node.unwrap();

replaceWith#

Replace each element in the Dom collection with the specified new content.

let $node = this.dom('#id');
$node.replaceWith($node.contents());
$node.replaceWith(function(node) {
    return this.dom('<h1>').append(this.dom(node).contents());
});

remove#

Remove the collection from the DOM.

let $node = this.dom('#id');
$node.remove();

clone#

Arguments:

  • events (optional) Boolean

Returns: Dom

Clone the wrapped object to another one.

let $node = this.dom('#id');
let $cloned = $node.clone();
let $clonedWithEvents = $node.clone(true);

show#

Show each element in the Dom collection.

let $node = this.dom('#id');
$node.show();

hide#

Hide each element in the Dom collection.

let $node = this.dom('#id');
$node.hide();

scrollTop#

Arguments:

  • value Number

Returns: Number

Get or set the scroll top position for element.

let $node = this.dom('#id');
let top = $node.scrollTop();
$node.scrollTop(100);

offset#

Returns: Object

Get the current coordinates of the first element in the Dom collection relative to the document.

let $node = this.dom('#id');
let offset = $node.offset();
console.log(offset.top, offset.left);

position#

Returns: Object

Get the current coordinates of the first element in the Dom collection relative to the offset parent.

let $node = this.dom('#id');
let position = $node.position();
console.log(position.top, position.left);

width#

Arguments:

  • value Number

Returns: Number

Get the current computed width for the first element in the Dom collection or set the width of each element.

let $node = this.dom('#id');
let width = $node.width();
$node.width(100); 

height#

Arguments:

  • value Number

Returns: Number

Get the current computed height for the first element in the Dom collection or set the height of each element.

let $node = this.dom('#id');
let height = $node.height();
$node.height(100); 

outerHeight#

Returns: Number

Get the current inner height (including padding, border, and margin) for the first element in the Dom collection.

let $node = this.dom('#id');
let height = $node.outerHeight();

outerWidth#

Returns: Number

Get the current inner width (including padding, border, and margin) for the first element in the Dom collection.

let $node = this.dom('#id');
let width = $node.outerWidth();

innerHeight#

Returns: Number

Get the current inner height (including padding but not border) for the first element in the Dom collection.

let $node = this.dom('#id');
let height = $node.innerHeight();

innerWidth#

Returns: Number

Get the current inner width (including padding but not border) for the first element in the Dom collection.

let $node = this.dom('#id');
let width = $node.innerWidth();

click#

Trigger the click event of each element in the Dom collection.

let $node = this.dom('#id');
$node.click();

focus#

Trigger the focus event of each element in the Dom collection.

let $node = this.dom('#id');
$node.focus();

on#

Arguments:

  • event String
  • handler Function

Set the event handler to each element in the Dom collection.

let $node = this.dom('#id');
$node.on('click', fn);
$node.on('click focus', fn);
$node.on('click.namespace', fn);
$node.on('click.namespace focus.namespace', fn);

one#

Arguments:

  • event String
  • handler Function

Set the event handler (will be executed once) to each element in the Dom collection.

let $node = this.dom('#id');
$node.one('click', fn);
$node.one('click focus', fn);
$node.one('click.namespace', fn);
$node.one('click.namespace focus.namespace', fn);

off#

Arguments:

  • event (optional) String
  • handler (optional) Function

Remove the event or events from each element in the Dom collection.

let $node = this.dom('#id');
$node.off(); // all events
$node.off('click');
$node.off('click', fn);
$node.off('click focus');
$node.off('click.namespace');
$node.off('click.namespace focus.namespace');
$node.off('.namespace');

serialize#

Arguments:

  • asObject (optional) Boolean

Convert the form inputs value into a serialized string or object.

let $form = this.dom('#my-form');
let str = $form.serialize();
let obj = $form.serialize(true);