Arguments:
String
Node
Nodelist
Array
Dom
HTML
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');
Returns: Number
Get the number of nodes in the Dom collection.
let $nodes = this.dom('a');
let len = $nodes.length;
Arguments:
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);
Arguments:
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);
Return: Array
Return the array off all nodes in the Dom collection.
let $nodes = this.dom('a');
let nodes = $nodes.getAll();
Arguments:
Number
Return: Dom
Return a collection containing only the one at the specified index.
let $nodes = this.dom('a');
let $node = $nodes.eq(2);
Return: Dom
Return the first Dom element from collection.
let $nodes = this.dom('a');
let $node = $nodes.first();
Return: Dom
Return the last Dom element from collection.
let $nodes = this.dom('a');
let $node = $nodes.last();
Return: Object
Return child nodes of each element in the Dom collection.
let $node = this.dom('#id');
let contents = $node.contents();
Arguments:
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');
});
Arguments:
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')
Arguments:
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')
});
Arguments:
String
Return: Dom
Remove some nodes from the Dom collection by the specified selector.
let $nodes = this.dom('a');
$nodes.not('.active-class');
Arguments:
String
Return: Dom
Find child nodes for each elements in the Dom collection.
let $nodes = this.dom('a');
let $spans = $nodes.find('span');
Arguments:
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');
Arguments:
String
Return: Dom
Return the parent element for each element in the Dom collection.
let $node = this.dom('#id');
let $parent = $node.parent();
Arguments:
String
String
Node
Return: Dom
Return all parents elements for each element in the Dom collection.
let $node = this.dom('#id');
let $parents = $node.parents();
Arguments:
String
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');
Return: Dom
Return the next sibling of each element in the Dom collection.
let $node = this.dom('#id');
let $next = $node.next();
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();
Return: Dom
Return the previous sibling of each element in the Dom collection.
let $node = this.dom('#id');
let $prev = $node.prev();
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();
Arguments:
String
Object
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' });
Arguments:
String
Object
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' });
Arguments:
String
Object
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' });
Arguments:
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');
Arguments:
String
Remove the attribute from each element in the Dom collection.
let $node = this.dom('#id');
$node.removeAttr('rel');
Arguments:
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');
Arguments:
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');
Arguments:
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');
Arguments:
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');
Set the html content is empty to each element in the Dom collection.
let $node = this.dom('#id');
$node.empty();
Arguments:
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>');
Arguments:
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');
Arguments:
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>');
Arguments:
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>');
Arguments:
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>');
Arguments:
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>');
Arguments:
String
Wrap each element in the Dom collection with the specified html tag.
let $node = this.dom('#id');
$node.wrap('<h1>');
Remove the parent element from each element in the Dom collection.
let $node = this.dom('#id');
$node.unwrap();
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 the collection from the DOM.
let $node = this.dom('#id');
$node.remove();
Arguments:
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 each element in the Dom collection.
let $node = this.dom('#id');
$node.show();
Hide each element in the Dom collection.
let $node = this.dom('#id');
$node.hide();
Arguments:
Number
Returns: Number
Get or set the scroll top position for element.
let $node = this.dom('#id');
let top = $node.scrollTop();
$node.scrollTop(100);
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);
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);
Arguments:
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);
Arguments:
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);
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();
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();
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();
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();
Trigger the click event of each element in the Dom collection.
let $node = this.dom('#id');
$node.click();
Trigger the focus event of each element in the Dom collection.
let $node = this.dom('#id');
$node.focus();
Arguments:
String
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);
Arguments:
String
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);
Arguments:
String
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');
Arguments:
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);