https://github.com/jaysalvat/bonze
Super tiny chainable and extendable tool for selecting, creating and filtering DOM Elements with ease.
https://github.com/jaysalvat/bonze
dom-elements filter-elements js-selector-helper
Last synced: about 1 year ago
JSON representation
Super tiny chainable and extendable tool for selecting, creating and filtering DOM Elements with ease.
- Host: GitHub
- URL: https://github.com/jaysalvat/bonze
- Owner: jaysalvat
- License: mit
- Created: 2016-11-07T15:48:03.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T03:31:28.000Z (over 3 years ago)
- Last Synced: 2025-04-13T06:16:11.319Z (about 1 year ago)
- Topics: dom-elements, filter-elements, js-selector-helper
- Language: JavaScript
- Homepage:
- Size: 1.34 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bonze
[](http://badge.fury.io/js/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
```javascript
const el = document.querySelector('#section');
if (el) {
el.style.color = 'green';
}
```
#### With Bonze
```javascript
$('#section')(el => el.style.color = 'green');
```
### Example 2
#### Without Bonze
```javascript
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
```javascript
$('div, p')
.each(el => el.style.color = 'green')
.last(el => el.style.color = 'red');
```
## Install
### NPM
npm install --save bonze
```javascript
import $ from 'bonze';
```
### CDN
From [Unpkg.com](https://unpkg.com/bonze)
#### UMD
```html
```
#### ESM module
```html
```
If you include bonze this way use `bonze` instead of `$` in the examples below.
## Usage
### Dom ready
```javascript
$(() => {
document.body.classList.add('ready');
});
```
### Select elements
```javascript
$('h1, h2, h3').each(headings => {
headings.classList.add('red');
});
$('h1, h2, h3')(headings => { // Shortcut for each
headings.classList.add('red');
});
```
### Select elements in context
```javascript
$('h1, h2, h3', '#article')(headings => {
headings.classList.add('red');
});
```
### Filter elements
```javascript
$('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
```javascript
$('
My New Title
')((h1) => {
document.body.prepend(h1);
});
```
### Chainable
```javascript
$('div')
((div, i) => {
div.innerHTML = 'Paragraph ' + i;
})
(div => {
div.classList.add('green');
})
.last(div => {
div.classList.add('red');
});
```
### Extendable
```javascript
$.plugin('addClass', (el, index, elmts, name) => {
el.classList.add(name);
});
$('div').odd().addClass('black');
$('div').even().addClass('white');
```
### Get DOM elements
```javascript
const domElementArray = $('div')();
const domFirstElement = $('div')(0);
const domSecondElement = $('div')(1);
```
# Credits
Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](www.flaticon.com).