jaysalvat/bonze

Super tiny chainable and extendable tool for selecting, creating and filtering DOM Elements with ease.

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.