d_js

d.js

Micro dom manipulation library. Because jQuery is not needed always.

A lot of this code is taken from http://youmightnotneedjquery.com/

• Compatible with modern browsers and IE >= 10
• Installable with bower bower install d.js
• Compatible with AMD, commonJS and global javascript
• Only 4Kb (minified)
• HTML & SVG support

Usage example:

//Get an array with all .buttons elements
var buttons = d.getAll('.buttons');

//Change css properties
d.css(buttons, {
	fontFamily: 'Arial',
	color: 'red',
	transition: 'all 2s'
});

//Handle events
d.on('click', buttons, function () {
	alert('clicked');
});

API

d.get(query)

Returns the first element found:

• query A string with the selector, array of elements, an object or a Node/NodeList/HTMLCollection instance

var container = d.get('.container');

//Use an object to specify the context
var buttonInContainer = d.get({'.button': container});

d.getAll(query)

Returns an array with all elements found:

• query A string with the selector, array of elements, an object or a Node/NodeList/HTMLCollection instance

d.get('.button').forEach(function (el) {
	el.classList.add('selected');
});

d.getSiblings(element, query)

Returns an array with all siblings of another.

• element A string with the selector, array of elements, an object or a Node/NodeList/HTMLCollection instance
• query Optional string to filter the siblings

d.getSiblings('li'); //return all siblings
d.getSiblings('li', '.filtered'); //return all siblings with class '.filtered'

d.is(element, query)

Returns if the element matches with the selector:

• element The element
• query A string with the selector

d.is(document.body, 'h1'); //false
d.is(document.body, 'body'); //true

d.on(event, query, callback, useCapture)

Attach an event to the elements

• event A string with the event name or an instance of Event
• query A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
• callback The event callback
• useCapture (optional)

function clickAction(e) {
	alert('Event ' + e.type);
}

d.on('click', '.button', clickAction);

d.delegate(event, query, target, callback, useCapture)

Delegate an event to the elements

• event A string with the event name or an instance of Event
• query A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
• target A string with the target selector
• callback The event callback
• useCapture (optional)

function clickAction(e) {
	alert('Event ' + e.type);
}

d.on('click', '.navigation', 'a', clickAction);

d.off(event, query, callback, useCapture)

Removes an event from the elements

• event A string with the event name or an instance of Event
• query A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
• callback The event callback
• useCapture (optional)

d.off('click', '.button', clickAction);

d.trigger(event, query)

Trigger an event of the elements

• event A string with the event name or an instance of Event
• query A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance

d.trigger('click', '.button');

d.remove(query)

Removes the elements from the DOM

• query A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance

d.remove('.button');

d.setData(query, name, value)

Set a data-* attribute. If it's an array or object, is converted to json

• query A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
• name The name of the data attribute
• value The value of the data attribute

d.setData('.button', 'clicked', true);

d.getData(query, name)

Get a data-* attribute. It can detect and convert primitive types like integers, floats and booleans. Json values are automatically parsed.

• query A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
• name The name of the data attribute

d.setData('.button', 'clicked'); //true

d.insertAfter(query, content)

Insert new elements after other

• query A string with the selector, array of elements or a NodeList/HTMLCollection instance
• content A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance

d.insertAfter('li:last-child', newNodes);
d.insertAfter('li:last-child', '<li>new content</li>');

d.insertBefore(query, content)

Insert new elements before other

• query A string with the selector, array of elements or a NodeList/HTMLCollection instance
• content A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance

d.insertBefore('li:first-child', newNodes);
d.insertBefore('li:first-child', '<li>new content</li>');

d.prepend(query, content)

Insert new elements as first children of other element

• query A string with the selector, array of elements or a NodeList/HTMLCollection instance
• content A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance

d.prepend('ul', newLiNode);
d.prepend('ul', '<li>new content</li>');

d.append(query, content)

Insert new elements as last children of other element

• query A string with the selector, array of elements or a NodeList/HTMLCollection instance
• content A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance

d.append('ul', newLiNode);
d.append('ul', '<li>new content</li>');

d.css()

Set/get the css properties of the first element. The vendor prefixes are handled automatically.

• query A string with the selector, array of elements or a NodeList/HTMLCollection instance
• prop A string with the property name or an object with property/values
• value The new value of the property

//Get the value
var color = d.css('.button', 'color');

//Set a new value
d.css('.button', 'color', 'blue');

//Set several values
d.css('.button', {
	color: 'red',
	backgroundColor: ['blue', 'red', 'green'], //set different values for each element
	transform: 'rotate(5deg)' //don't care about vendor prefixes
	width: function (el, index) { //use a function to calculate the value for each element
		return (100 + (100*index)) + 'px';
	}
});

d.parse()

Parses html code. Returns an element or an array of elements

• html A string with the code to parse
• forceArray To return an array of elements even if just one element has been parsed

//parse one element
var button = d.parse('<button>Hello</button>');
button.classList.add('active');

//parse a list of elements
var buttons = d.parse('<button>Hello</button><button>World</button>');

buttons.forEach(function (el) {
	el.classList.add('active');
});

Chaining

d.js allows to create d instances so you can chain some of these methods. Example:

d('.button')
	.css({
		color: 'red',
		fontFamily: 'Arial'
	}).
	.on('click', function (e) {
		alert('Button clicked');
	})
	.append('.buttons');

//You can create new elements on the fly:
d('<button>Click me</button>')
	.css({
		color: 'red',
		fontFamily: 'Arial'
	})
	.on('click', function () {
		alert('Hi!');
	})
	.appendTo('.buttons');

Chainable methods:

Method	Description
.on(event, callback, useCapture)	Attach an event.
.off(event, callback, useCapture)	Removes an event.
.delegate(event, target, callback, useCapture)	Delegates an event.
.trigger(event, data)	Trigger an event
`.css(props	prop, value)`
`.insertBefore(content	query)`
`.insertAfter(content	query)`
`.prepend(content	query)`
`.append(content	query)`
.insertBeforeTo(query)	Insert the element before other element
.insertAfterTo(query)	Insert the element after other element
.prependTo(query)	Insert the element as first child of other element
.appendTo(query)	Insert the element as last child of other element

Changelog

1.8.0 - 2017-04-17

• New functions d.getData() and d.setData().