Dom

dom #

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

Returns: Dom

Wrap a node or nodes to Dom collection.

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

length #

Returns: Number

Get the number of nodes in the Dom collection.

var $nodes = $K.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 = $K.dom('a');
$nodes.add(anotherNode);

get #

Arguments
index Number

Return: Node

Return the node at the specified index.

var $nodes = $K.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 = $K.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 = $K.dom('a');
var $node = $nodes.eq(2);

first #

Return: Dom

Return the first Dom element from collection.

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

last #

Return: Dom

Return the last Dom element from collection.

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

contents #

Return: Object

Return child nodes of each element in the Dom collection.

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

each #

Arguments
callback Function

Return: Dom

Execute a function for each element in the collection.

var $nodes = $K.dom('a');
$nodes.each(function(node)
{
    node.style.color = 'red';
});

is #

Arguments
selector String Node, Dom

Return: Boolean

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

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

filter #

Arguments
selector String Function

Return: Dom

Filter the Dom collection by selector or function.

var $nodes = $K.dom('a');
$nodes.filter(function(node)
{
        return node.hasAttribute('rel')
    });

not #

Arguments
selector String

Return: Dom

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

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

find #

Arguments
selector String

Return: Dom

Find child nodes for each elements in the Dom collection.

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

parents #

Arguments
selector (optional) String
context (optional) String Node Dom

Return: Dom

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

var $node = $K.dom('#id');
var $parents = $node.parents();

closest #

Arguments
selector (optional) String
context (optional) String Node Dom

Return: Dom

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

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

next #

Return: Dom

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

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

prev #

Return: Dom

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

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

removeData #

Arguments
key String

Remove the data attribute from each element in the Dom collection.

var $node = $K.dom('#id');
$node.removeData('key');

addClass #

Arguments
class String

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

var $node = $K.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 = $K.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 = $K.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 = $K.dom('#id');
var has = $node.hasClass('my-class');

empty #

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

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

unwrap #

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

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

replaceWith #

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

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

remove #

Remove the collection from the DOM.

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

clone #

Arguments
events (optional) Boolean

Returns: Dom

Clone the wrapped object to another one.

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

show #

Show each element in the Dom collection.

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

hide #

Hide each element in the Dom collection.

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

scrollTop #

Arguments
value Number

Returns: Number

Get or set the scroll top position for element.

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

click #

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

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

focus #

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

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

trigger #

Arguments
event String

Trigger event for each element in the Dom collection.

var $node = $K.dom('#id');
$node.trigger('event');

on #

Arguments
event String
handler Function

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

var $node = $K.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 = $K.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 = $K.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 = $K.dom('#my-form');
var str = $form.serialize();
var obj = $form.serialize(true);

ajax #

Arguments
success (optional) Function
error (optional) Function

Send the form by ajax with the same action, method and values.

var $form = $K.dom('#my-form');
$form.ajax();
$form.ajax(
    function(data) { console.log('success'); },
    function(data) { console.log('error'); }
);