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 List itself

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