bonze
v1.6.2
Published
Super tiny chainable and extendable tool wrapping native `querySelectorAll` for selecting, creating and filtering DOM Elements with ease.
Downloads
12
Readme
Bonze
Super tiny chainable and extendable tool wrapping native querySelectorAll
for selecting, creating and filtering DOM Elements with ease.
~750b Gzipped.
Concept
Example 1
Without Bonze
const el = document.querySelector('#section');
if (el) {
el.style.color = 'green';
}
With Bonze
$('#section')(el => el.style.color = 'green');
Example 2
Without Bonze
const elements = document.querySelectorAll('div, p');
for (let i = 0; i < elements.length; ++i) {
elements[i].style.color = 'green';
}
if (elements.length) {
elements[elements.length - 1].style.color = 'red';
}
With Bonze
$('div, p')
.each(el => el.style.color = 'green')
.last(el => el.style.color = 'red');
Install
NPM
npm install --save bonze
import $ from 'bonze';
CDN
From Unpkg.com
UMD
<script src="https://unpkg.com/bonze@latest"></script>
ESM module
<script src="https://unpkg.com/bonze@latest/dist/bonze.esm.min.js"></script>
If you include bonze this way use bonze
instead of $
in the examples below.
Usage
Dom ready
$(() => {
document.body.classList.add('ready');
});
Select elements
$('h1, h2, h3').each(headings => {
headings.classList.add('red');
});
$('h1, h2, h3')(headings => { // Shortcut for each
headings.classList.add('red');
});
Select elements in context
$('h1, h2, h3', '#article')(headings => {
headings.classList.add('red');
});
Filter elements
$('div').first(div => {
div.classList.add('first');
});
$('div').nth(2, div => {
div.classList.add('third');
});
$('div').last(div => {
div.classList.add('last');
});
$('div').odd(div => {
div.classList.add('odd');
});
$('div').even(div => {
div.classList.add('even');
});
$('div').filter(div => div.textContent.includes('error'), div => {
div.classList.add('red');
});
Create element
$('<h1>My New Title</h1>')((h1) => {
document.body.prepend(h1);
});
Chainable
$('div')
((div, i) => {
div.innerHTML = 'Paragraph ' + i;
})
(div => {
div.classList.add('green');
})
.last(div => {
div.classList.add('red');
});
Extendable
$.plugin('addClass', (el, index, elmts, name) => {
el.classList.add(name);
});
$('div').odd().addClass('black');
$('div').even().addClass('white');
Get DOM elements
const domElementArray = $('div')();
const domFirstElement = $('div')(0);
const domSecondElement = $('div')(1);
Credits
Icon made by Freepik from www.flaticon.com.