jQuery inspired DOM traversal / manipulation component. Aggregates the following components to create a more familiar experience when you need the combined functionality of:
- domify to convert HTML to DOM nodes
- query for selector engine integration
- classes to add, remove, and toggle classes
- delegate for event delegation
- event for event binding
- value for form field values
- css for style properties
With component:
$ component install component/dom
This library may be used stand-alone without the component
tool, simply add ./dom.js to your application and reference
the dom
global. With all its dependencies dom is the following size:
28K dom.js
16K dom.min.js
8.0K dom.js.gz
4.0K dom.min.js.gz
var dom = require('dom');
dom('li').select(function(el){
return el.text() == 'Maru';
}).addClass('amazing');
All occurrances of List
refer to:
- an element passed
- a string of html
- a selector string
- a node list
- an array of nodes
- a dom
List
itself
Return a List
with the given element(s)
via selector, html, arrays, nodelists, etc.
dom('ul li');
dom(dom('a'));
dom('<p>Hello</p>');
Append and return list
:
dom('ul')
.append('<li>Tobi</li>')
.addClass('user');
Prepend and return list
:
dom('ul')
.prepend('<li>Tobi</li>')
.addClass('user');
Insert after:
dom('<div></div>')
.insertAfter('body');
Replace:
dom('.placeholder')
.replace('<div>Tobi</div>')
.addClass('tobi');
Bind event
handler function:
dom('a.remove').on('click', function(e){
});
Bind delegate event
handler function for selector
:
dom('ul li').on('click', 'a.remove', function(e){
});
Unbind event
callback fn
.
dom('a.remove').off('click', onremove);
Unbind delegate event
callback fn
with selector
.
dom('ul li').off('click', 'a.remove', onremove);
Append elements in the list to list
and return itself for chaining.
dom('<li>Tobi</li>')
.appendTo('ul')
.addClass('user');
Return value for attribute name
:
var url = dom('img').attr('src');
Set attribute name
to val
.
dom('img').attr('src', 'image/of/maru.jpg');
Attribute getters. These are functionally equivalent
to .attr(ATTR)
:
el.id()
el.src()
el.rel()
el.cols()
el.rows()
el.name()
el.href()
el.title()
el.style()
el.tabindex()
el.placeholder()
Attribute setters. These are functionally equivalent
to .attr(ATTR, val)
:
el.id('item-1')
el.src('some/image.png')
el.rel('stylesheet')
el.cols(2)
el.rows(3)
el.name('username')
el.href('http://google.com')
el.title('Maru the cat')
el.style('color: white')
el.tabindex(2)
el.placeholder('Username')
Get css property value:
dom(el).css('width');
Set css property value:
dom(el).css('width', '300px');
Set css property values:
dom(el).css({
top: 5,
left: 10
});
Add a class name
to all elements in the list.
dom('img').addClass('loading');
Remove class name
to all elements in the list.
dom('img.loading').removeClass('loading');
Toggle class name
, with optional bool
.
dom('img').toggleClass('loading');
dom('img').toggleClass('loading', image.pending);
Check if any element in the list has the given class name
.
dom('img').hasClass('loading');
Return a list of descendants matching selector
.
dom('.uploads').find('.complete').remove();
Iterate elements passing each one as a list, and its index:
dom('ul li').each(function(li, i){
if (li.hasClass('complete')) {
li.remove();
}
});
Iterate elements passing each one, and its index:
dom('ul li').forEach(function(li, i){
if (li.className == 'complete') {
li.parentNode.removeChild(li);
}
});
Empties the elements.
var list = dom('<div><a href="/meow.html">cute kitty</a></div>');
assert('' == list.empty().html());
Iterate elements passing each one, and its index:
dom('ul li').forEach(function(li, i){
if (li.className == 'complete') {
li.parentNode.removeChild(li);
}
});
Return an array with map fn
, passing each element as a list:
var hrefs = dom('a').map(function(a){
return a.attr('href');
});
Or with a string:
var types = dom('input').map('type');
Filter elements with the given function, passing each element
as a list. This method is aliased as .filter(fn)
.
var pending = dom('ul li').select(function(li){
return li.hasClass('pending');
});
Or with a string:
var imgs = dom('img').select('src');
Reject elements with the given function, passing each element as a list.
var active = dom('ul li').reject(function(li){
return li.hasClass('pending');
});
Or with a string:
var active = dom('input').reject('disabled');
Return a List
containing the i
th element.
dom('ul li').at(1).remove();
Return a List
containing the first element:
dom('ul li').first().remove();
Return a List
containing the last element:
dom('ul li').last().remove();
Return the inner html.
Set the inner html to str
.
Return the text content.
Set text content to str
.
Return a cloned list of cloned nodes.
Similar to jQuery, you can extend dom to support plugins:
var get = function(i) { return this[i]; }
dom.use('get', get);
Using the function's name:
function get(i) { return this[i]; }
dom.use(get);
Passing an object through:
var obj = {};
obj.get = function(i) { return this[i]; }
obj.draggable = function() { ... }
dom.use(obj);
It is recommended that you do not depend on this library directly when creating public components, unless you require most or all of the functionality provided. Otherwise it is preferred that you use the smaller more specific components.
This lib will not include any XHR support, js animations, promises, or anything else out of scope. This library is for DOM manipulation, traversal, and events only.
This library is not aiming for feature parity with jQuery.
MIT