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:
var buttons = d.getAll('.buttons');
d.css(buttons, {
fontFamily: 'Arial',
color: 'red',
transition: 'all 2s'
});
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');
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');
d.getSiblings('li', '.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');
d.is(document.body, 'body');
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.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
var color = d.css('.button', 'color');
d.css('.button', 'color', 'blue');
d.css('.button', {
color: 'red',
backgroundColor: ['blue', 'red', 'green'],
transform: 'rotate(5deg)'
width: function (el, index) {
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
var button = d.parse('<button>Hello</button>');
button.classList.add('active');
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');
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 |