underscore.dom

About

This is plugin which provides API for DOM operation for underscore.js/lo-dash.js.

Build

You can build with following command.

$ grunt build

This supports build for following libraries which provide Ajax or Promise.

$ git submodule init
$ git submodule update
$ grunt build

They will be mapped to _.ajax and _.when.

Selector API

_.qsa(selector, context)

Get all elements selected with css selector.

//context is optional parameter.
//if context is empty, element will be searched with document as context
var elements = _.qsa("tagName .className", document);

_.qs(selector, context)

Get first element selected with css selector.

//context is optional parameter.
//if context is empty, element will be searched with document as context
var element = _.qs("tagName .className", document);

Event API

_.ready(callback)

Handle DOMContentLoaded event.

_.ready(function() {
    console.log("DOMContentLoaded");
});

_.on(targetElements, type, callback)

Add event to element.

var clickCallback = function() {
    console.log("element is clicked.");
};

var targetElements = _.qsa(".targetClass");

_.on(targetElements, "click", clickCallback);

_.off(targetElements, type, callback)

Remove event from element.

var clickCallback = function() {
    console.log("element is clicked.");
};

var targetElements = _.qsa(".targetClass");

_.off(targetElements, "click", clickCallback);

_.on(targetElements, type, selector, callback)

Attach delegated event handler to elements which matches css selector.

var clickCallback = function() {
    console.log("span is clicked.");
};

var targetElements = _.qsa(".targetClass");

_.on(targetElements, "click", "button", clickCallback);

_.off(targetElements, type, selector, callback)

Detach delegated event handler from elements.

var clickCallback = function() {
    console.log("span is clicked.");
};

var targetElements = _.qsa("targetTag");

_.off(targetElements, "click", "button", clickCallback);

Manipulation API

_.addClass(targetElements, className)

Add class to element.

var targetElemenets = _.qsa(".targetClass");

_.addClass(targetElemenets, "addClassName");

_.removeClass(targetElements, className)

Remove class from element.

var targetElemenets = _.qsa(".targetClass");

_.removeClass(targetElemenets, "removeClassName");

_.toggleClass(targetElements, className)

Toggle class of element.

var targetElemenets = _.qsa(".targetClass");

_.toggleClass(targetElemenets, "toggleClassName");

_.dom