Menu
Redactor
Documentation / API Reference

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);