Menu
API
Documentation

Dom

dom

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

Returns: Dom

Wrap a node or nodes to Dom collection. 

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

length

Returns: Number

Get the number of nodes in the Dom collection.

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

add

Arguments
node Node Nodelist Dom

Add a node or nodes to the Dom collection.

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

get

Arguments
index Number

Return: Node

Return the node at the specified index.

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

getAll

Return: Array

Return the array off all nodes in the Dom collection.

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

eq

Arguments
index Number

Return: Dom

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

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

first

Return: Dom

Return the first Dom element from collection.

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

last

Return: Dom

Return the last Dom element from collection.

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

contents

Return: Object

Return child nodes of each element in the Dom collection.

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

each

Arguments
callback Function

Return: Dom

Execute a function for each element in the collection.

var $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.

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

filter

Arguments
selector String Function

Return: Dom

Filter the Dom collection by selector or function.

var $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.

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

find

Arguments
selector String

Return: Dom

Find child nodes for each elements in the Dom collection.

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

children

Arguments
selector (optional) String

Return: Object

Return children of each element in the Dom collection.

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

parent

Arguments
selector (optional) String

Return: Dom

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

var $node = this.dom('#id');
var $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.

var $node = this.dom('#id');
var $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.

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

next

Return: Dom

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

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

nextElement

Return: Dom

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

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

prev

Return: Dom

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

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

prevElement

Return: Dom

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

var $node = this.dom('#id');
var $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.

var $node = this.dom('#id');
var 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.

var $node = this.dom('#id');
var 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.

var $node = this.dom('#id');
var 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.

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

removeAttr

Arguments
key String

Remove the attribute from each element in the Dom collection.

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

addClass

Arguments
class String

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

var $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.

var $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.

var $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.

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

empty

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

var $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.

var $node = this.dom('#id');
var 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.

var $node = this.dom('#id');
var 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.

var element = document.createElement('span');
var $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.

var element = document.createElement('span');
var $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.

var element = document.createElement('span');
var $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.

var element = document.createElement('span');
var $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.

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

unwrap

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

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

replaceWith

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

var $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.

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

clone

Arguments
events (optional) Boolean

Returns: Dom

Clone the wrapped object to another one.

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

show

Show each element in the Dom collection.

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

hide

Hide each element in the Dom collection.

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

scrollTop

Arguments
value Number

Returns: Number

Get or set the scroll top position for element.

var $node = this.dom('#id');
var 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.

var $node = this.dom('#id');
var 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.

var $node = this.dom('#id');
var 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.

var $node = this.dom('#id');
var 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.

var $node = this.dom('#id');
var 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.

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

outerWidth

Returns: Number

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

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

innerHeight

Returns: Number

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

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

innerWidth

Returns: Number

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

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

click

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

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

focus

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

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

on

Arguments
event String
handler Function

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

var $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. 

var $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. 

var $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.

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