{"id":19964625,"url":"https://github.com/jaysalvat/bonze","last_synced_at":"2025-05-03T23:30:34.196Z","repository":{"id":12903460,"uuid":"73094613","full_name":"jaysalvat/bonze","owner":"jaysalvat","description":"Super tiny chainable and extendable tool for selecting, creating and filtering DOM Elements with ease.","archived":false,"fork":false,"pushed_at":"2023-01-05T03:31:28.000Z","size":1406,"stargazers_count":6,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T06:16:11.319Z","etag":null,"topics":["dom-elements","filter-elements","js-selector-helper"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaysalvat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-07T15:48:03.000Z","updated_at":"2024-07-03T10:23:03.000Z","dependencies_parsed_at":"2023-01-13T17:11:42.129Z","dependency_job_id":null,"html_url":"https://github.com/jaysalvat/bonze","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysalvat%2Fbonze","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysalvat%2Fbonze/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysalvat%2Fbonze/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaysalvat%2Fbonze/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaysalvat","download_url":"https://codeload.github.com/jaysalvat/bonze/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252269026,"owners_count":21721239,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-elements","filter-elements","js-selector-helper"],"created_at":"2024-11-13T02:24:33.117Z","updated_at":"2025-05-03T23:30:33.393Z","avatar_url":"https://github.com/jaysalvat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Bonze](https://jaysalvat.github.io/bonze/bonze.svg)\n\n# Bonze\n\n[![NPM version](https://badge.fury.io/js/bonze.svg)](http://badge.fury.io/js/bonze)\n\nSuper tiny chainable and extendable tool wrapping native `querySelectorAll` for selecting, creating and filtering DOM Elements with ease.\n**~750b Gzipped**.\n\n![Bonze](https://jaysalvat.github.io/bonze/screen.png)\n\n## Concept\n\n### Example 1\n\n#### Without Bonze\n\n```javascript\nconst el = document.querySelector('#section');\n\nif (el) {\n  el.style.color = 'green';\n}\n```\n\n#### With Bonze\n\n```javascript\n$('#section')(el =\u003e el.style.color = 'green');\n```\n\n### Example 2\n\n#### Without Bonze\n\n```javascript\nconst elements = document.querySelectorAll('div, p');\n\nfor (let i = 0; i \u003c elements.length; ++i) {\n  elements[i].style.color = 'green';\n}\n\nif (elements.length) {\n  elements[elements.length - 1].style.color = 'red';\n}\n```\n\n#### With Bonze\n\n```javascript\n$('div, p')\n  .each(el =\u003e el.style.color = 'green')\n  .last(el =\u003e el.style.color = 'red');\n```\n\n## Install\n\n### NPM\n\n    npm install --save bonze\n\n```javascript\nimport $ from 'bonze';\n```\n\n### CDN\n\nFrom [Unpkg.com](https://unpkg.com/bonze)\n\n#### UMD\n\n```html\n\u003cscript src=\"https://unpkg.com/bonze@latest\"\u003e\u003c/script\u003e\n```\n\n#### ESM module\n\n```html\n\u003cscript src=\"https://unpkg.com/bonze@latest/dist/bonze.esm.min.js\"\u003e\u003c/script\u003e\n```\n\nIf you include bonze this way use `bonze` instead of `$` in the examples below.\n\n## Usage\n\n### Dom ready\n\n```javascript\n$(() =\u003e {\n  document.body.classList.add('ready');\n});\n```\n\n### Select elements\n\n```javascript\n$('h1, h2, h3').each(headings =\u003e {\n  headings.classList.add('red');\n});\n\n$('h1, h2, h3')(headings =\u003e { // Shortcut for each\n  headings.classList.add('red');\n});\n```\n\n### Select elements in context\n\n```javascript\n$('h1, h2, h3', '#article')(headings =\u003e {\n  headings.classList.add('red');\n});\n```\n\n### Filter elements\n\n```javascript\n$('div').first(div =\u003e {\n  div.classList.add('first');\n});\n\n$('div').nth(2, div =\u003e {\n  div.classList.add('third');\n});\n\n$('div').last(div =\u003e {\n  div.classList.add('last');\n});\n\n$('div').odd(div =\u003e {\n  div.classList.add('odd');\n});\n\n$('div').even(div =\u003e {\n  div.classList.add('even');\n});\n\n$('div').filter(div =\u003e div.textContent.includes('error'), div =\u003e {\n  div.classList.add('red');\n});\n\n```\n\n### Create element\n\n```javascript\n$('\u003ch1\u003eMy New Title\u003c/h1\u003e')((h1) =\u003e {\n  document.body.prepend(h1);\n});\n```\n\n### Chainable\n\n```javascript\n$('div')\n  ((div, i) =\u003e {\n    div.innerHTML = 'Paragraph ' + i;\n  })\n  (div =\u003e {\n    div.classList.add('green');\n  })\n  .last(div =\u003e {\n    div.classList.add('red');\n  });\n```\n\n### Extendable\n\n```javascript\n$.plugin('addClass', (el, index, elmts, name) =\u003e {\n  el.classList.add(name);\n});\n\n$('div').odd().addClass('black');\n$('div').even().addClass('white');\n```\n\n### Get DOM elements\n\n```javascript\nconst domElementArray = $('div')();\n\nconst domFirstElement = $('div')(0);\n\nconst domSecondElement = $('div')(1);\n```\n\n# Credits\n\nIcon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](www.flaticon.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaysalvat%2Fbonze","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaysalvat%2Fbonze","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaysalvat%2Fbonze/lists"}