Micro dom manipulation library. Because jQuery is not needed always.
A lot of this code is taken from http://youmightnotneedjquery.com/
bower install d.js//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');
});
Returns the first element found:
var container = d.get('.container');
//Use an object to specify the context
var buttonInContainer = d.get({'.button': container});
Returns an array with all elements found:
d.get('.button').forEach(function (el) {
el.classList.add('selected');
});
Returns an array with all siblings of another.
d.getSiblings('li'); //return all siblings
d.getSiblings('li', '.filtered'); //return all siblings with class '.filtered'
Returns if the element matches with the selector:
d.is(document.body, 'h1'); //false
d.is(document.body, 'body'); //true
Attach an event to the elements
Eventfunction clickAction(e) {
alert('Event ' + e.type);
}
d.on('click', '.button', clickAction);
Delegate an event to the elements
Eventfunction clickAction(e) {
alert('Event ' + e.type);
}
d.on('click', '.navigation', 'a', clickAction);
Removes an event from the elements
Eventd.off('click', '.button', clickAction);
Trigger an event of the elements
Eventd.trigger('click', '.button');
Removes the elements from the DOM
d.remove('.button');
Set/get data-* attributes. It can detect and convert primitive types like integers, floats and booleans. If it's an array or object, is converted to json.
//Get a data value
var clicked = d.data('.button', 'clicked');
//Set a new value
d.data('.button', 'clicked', true);
//Set several values
d.data('.button', {
boolean: true,
array: ['blue', 'red', 'green'],
object: {one: '1', two: 2},
integer: 123,
float: 123.45,
});
Insert new elements after other
d.insertAfter('li:last-child', newNodes);
d.insertAfter('li:last-child', '<li>new content</li>');
Insert new elements before other
d.insertBefore('li:first-child', newNodes);
d.insertBefore('li:first-child', '<li>new content</li>');
Insert new elements as first children of other element
d.prepend('ul', newLiNode);
d.prepend('ul', '<li>new content</li>');
Insert new elements as last children of other element
d.append('ul', newLiNode);
d.append('ul', '<li>new content</li>');
Set/get the css properties of the first element. The vendor prefixes are handled automatically.
//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';
}
});
Parses html code. Returns an element or an array of elements
//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');
});
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(name, value) | Get/set css properties |
.data(name, value) | Get/set data-* attributes |
.insertBefore(content) | Insert new elements before the element |
.insertAfter(content) | Insert new elements after the element |
.prepend(content) | Insert new elements as first children |
.append(content) | Insert new elements as last children |
.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 |
1.10.0 - 2017-07-20
d.delegate() includes a second argument with the target.FAQs
DOM manipulation micro-library
The npm package d_js receives a total of 5 weekly downloads. As such, d_js popularity was classified as not popular.
We found that d_js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.