Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    component-dompublic

    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

    install

    npm i component-dom

    Downloadsweekly downloads

    30

    version

    1.0.8

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar