You like jQuery syntax and ES2015 features?

Dom-box is a neat wrapper around DOM APIs with jQuery like syntax. It is designed to fit only your needs. Import just what your app deserves.

$ npm install --save dombox

import $ from 'dom-box';
import {addClass} from 'dom-box/modules/add_class';

$('.msg', addClass('open'));

import $ from 'dom-box';
import wizard from 'dom-box/mod_wizard';

const findTheMightyElements = wizard(function findTheMightyElements() {

	const newElements = this.filter(element => {
		return element.tagName === 'MIGHTY';
	});

	return newElements;
});

/*
	<div></div>
	<mighty></mighty>
	<section></section>
*/

$('*', findTheMightyElements()); // [mighty]

• on
• off
• index
• prev
• next
• prevAll
• nextAll
• replaceWith
• wrap
• html
• text
• val
• prop
• attr
• bind (observer)
• remove
• append
• data

index.js:7-33

Finds elements in the given scope, filtered by the given selector

Parameters

• paramSelector (selector | element) The elements to find
• paramScope [(selector | element)] The scope to search for the elements (optional, default document)

Returns array A set of elements

modules/add_class.js:13-21

Adds one or more classes to each of the selected elements.

Parameters

• cssClass String One or more space separted classes.

Examples

$('div', addClass('foo'));
$('div', addClass('foo bar'));

Returns Array The selected elements.

modules/remove_class.js:13-21

Removes one or more classes from each of the selected elements.

Parameters

• cssClass String One or more space separted classes.

Examples

$('div', removeClass('foo'));
$('div', removeClass('foo bar'));

Returns Array The selected elements.

modules/has_class.js:13-19

Checks if at least one element in the current set contains the given class or classes.

Parameters

• cssClass String One or more space separted classes.

Examples

$('div', addClass('foo'));
$('div', addClass('foo bar'));

Returns Boolean Returns true if there is a match.

modules/first.js:17-19

Reduces the current set to the first element in the set.

Examples

//<ul>
// <li class="first"></li>
// <li></li>
//	<li></li>
//</ul>

$('li', 'ul', first()); // ['li.first']

Returns Array The first element.

modules/last.js:17-19

Reduces the current set to the last element in the set.

Examples

//<ul>
// <li></li>
// <li></li>
//	<li class="last"></li>
//</ul>

$('li', 'ul', last()); // ['li.last']

Returns Array The last element.

modules/find.js:17-25

Finds the descendants in the current set, filtered by the given selector.

Parameters

• selector String A selector expression.

Examples

//<article>
//	<section></section>
//	<section></section>
//</article>
$('article', find('section')) // ['section', 'section']

Returns Array A set of fetched elements.

modules/val.js:16-26

Get the value of the first element or set the value of each element.

Parameters

• value [(String | Number)] The functions works as setter if this parameter is given.

Examples

// <input type="text" value="foo" />
$('input', val()); // foo
$('input', val('bar')); // <input type="text" value="bar" />

Returns (Array | String) The current set of matched elements if the function is used as setter, or the value of the first element if the function is used as getter.

modules/show.js:11-17

Display the selected elements.

Examples

$('div', show());

Returns Array The selected elements.

modules/hide.js:11-17

Hide the selected elements.

Examples

$('div', hide());

Returns Array The selected elements.

MIT © Chris Ebert