dom
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
Installation
With component:
$ component install component/dom
Stand-alone
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
Example
var dom = require('dom');
dom('li').select(function(el){
return el.text() == 'Maru';
}).addClass('amazing');API
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
Listitself
dom(list)
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(list)
Append and return list:
dom('ul')
.append('<li>Tobi</li>')
.addClass('user');.prepend(list)
Prepend and return list:
dom('ul')
.prepend('<li>Tobi</li>')
.addClass('user');.insertAfter(list)
Insert after:
dom('<div></div>')
.insertAfter('body');.replace(list)
Replace:
dom('.placeholder')
.replace('<div>Tobi</div>')
.addClass('tobi');.on(event, fn, [capture])
Bind event handler function:
dom('a.remove').on('click', function(e){
});.on(event, selector, fn, [capture])
Bind delegate event handler function for selector:
dom('ul li').on('click', 'a.remove', function(e){
});.off(event, fn, [capture])
Unbind event callback fn.
dom('a.remove').off('click', onremove);.off(event, selector, fn, [capture])
Unbind delegate event callback fn with selector.
dom('ul li').off('click', 'a.remove', onremove);.appendTo(list)
Append elements in the list to list
and return itself for chaining.
dom('<li>Tobi</li>')
.appendTo('ul')
.addClass('user');.attr(name)
Return value for attribute name:
var url = dom('img').attr('src');.attr(name, val)
Set attribute name to val.
dom('img').attr('src', 'image/of/maru.jpg');.ATTR()
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().ATTR(val)
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').css(prop)
Get css property value:
dom(el).css('width');.css(prop, val)
Set css property value:
dom(el).css('width', '300px');.css(object)
Set css property values:
dom(el).css({
top: 5,
left: 10
});.addClass(name)
Add a class name to all elements in the list.
dom('img').addClass('loading');.removeClass(name)
Remove class name to all elements in the list.
dom('img.loading').removeClass('loading');.toggleClass(name, [bool])
Toggle class name, with optional bool.
dom('img').toggleClass('loading');
dom('img').toggleClass('loading', image.pending);.hasClass(name)
Check if any element in the list has the given class name.
dom('img').hasClass('loading');.find(selector)
Return a list of descendants matching selector.
dom('.uploads').find('.complete').remove();.each(fn)
Iterate elements passing each one as a list, and its index:
dom('ul li').each(function(li, i){
if (li.hasClass('complete')) {
li.remove();
}
});.empty()
Empties the elements.
var list = dom('<div><a href="/meow.html">cute kitty</a></div>');
assert('' == list.empty().html());.forEach(fn)
Iterate elements passing each one, and its index:
dom('ul li').forEach(function(li, i){
if (li.className == 'complete') {
li.parentNode.removeChild(li);
}
});.map(fn)
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');.select(fn)
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(fn)
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');.at(i)
Return a List containing the ith element.
dom('ul li').at(1).remove();.first()
Return a List containing the first element:
dom('ul li').first().remove();.last()
Return a List containing the last element:
dom('ul li').last().remove();.html()
Return the inner html.
.html(str)
Set the inner html to str.
.text()
Return the text content.
.text(str)
Set text content to str.
.clone()
Return a cloned list of cloned nodes.
.focus()
Set focus on the element.
.use([name], fn|obj)
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);Notes
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.
Test
npm install component-test
make test
License
MIT