Bonze

Super tiny chainable and extendable tool wrapping native querySelectorAll for selecting, creating and filtering DOM Elements with ease. ~750b Gzipped.

Demos

See demos here.

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');
});

$('div.focus').siblings(div => {
  div.classList.add('warning');
});

Create element

$('<h1>My New Title</h1>')((h1) => {
  document.body.prepend(h1);
});

Navigate back

.back() returns the previous selection in the chain, allowing you to branch from the same root.

$('div')
  .even(div => div.classList.add('even'))
  .back()
  .odd(div => div.classList.add('odd'));

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.