Documentation
Dom
dom
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
key | String |
Remove the attribute from each element in the Dom collection.
var $node = this.dom('#id');
$node.removeAttr('rel');
addClass
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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);