{"id":29124977,"url":"https://github.com/kosimst/kazel","last_synced_at":"2025-06-29T21:08:02.404Z","repository":{"id":57157788,"uuid":"146726453","full_name":"kosimst/kazel","owner":"kosimst","description":"Advanced querySelector with native APIs","archived":false,"fork":false,"pushed_at":"2019-02-18T15:41:14.000Z","size":30,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T17:12:39.370Z","etag":null,"topics":["dom","javascript","javascript-library","selector","tagged-template-literals","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":null,"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/kosimst.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-30T09:23:03.000Z","updated_at":"2020-05-11T22:40:37.000Z","dependencies_parsed_at":"2022-09-07T12:10:40.539Z","dependency_job_id":null,"html_url":"https://github.com/kosimst/kazel","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/kosimst/kazel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosimst%2Fkazel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosimst%2Fkazel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosimst%2Fkazel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosimst%2Fkazel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kosimst","download_url":"https://codeload.github.com/kosimst/kazel/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kosimst%2Fkazel/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262667302,"owners_count":23345537,"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","javascript","javascript-library","selector","tagged-template-literals","vanilla-javascript","vanilla-js"],"created_at":"2025-06-29T21:08:01.785Z","updated_at":"2025-06-29T21:08:02.392Z","avatar_url":"https://github.com/kosimst.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Kazel\n\n## Advanced querySelector with custom filters, native DOM-APIs and more.\n\n\u003e Note: Still under development, not stable yet, please report bugs\n\nEverybody knows the following situation: You have a bunch of HTML-Elements and want to change something about them e.g. add a class or change the innerText. But that's always quite frustrating, as you can't change them all at once. In fact, you can't even loop or map over them, because it's a NodeList and not an Array.\n\n### Installation\n\nInstall from npm:\n\n```\nnpm install --save kazel\n```\n\nImport in Javascript:\n\n```javascript\nimport { kazel } from '/node_modules/kazel/kazel.js'\n```\n\n### Available imports\n\n- `kazel`: Selector function\n- `KazelList`: KazelList (Advanced NodeList with Array Methods and able to change multiple elements at once -\u003e is returned by a kazel`` - selector)\n- `deep`: Filter for ShadowRoot\n- `parent`: Filter for parentElements\n- `first`: Filter for first child\n- `last`: filter for last child\n- `expect`: Filter to expect following elements\n- `children`: Filter for children\n- `matches`: Filter returns boolean whether selector matches or not\n\n### Native\n\n```javascript\nconst elmnts = document.querySelectorAll('#mycontainer \u003e div.tochange')\n\n// doesn't work\nelmnts.classList.add('anyclass')\nelmnts.innerText = 'sometext'\n\n// Also doesn't work\nelmnts.forEach(el =\u003e {\n  el.classList.add('anyclass')\n  el.innerText = 'sometext'\n})\n```\n\nSure, you could take a overloaded library like jQuery (minified around 13kB), but beside their big size they also don't offer you native DOM-APIs, so you have to learn all those functions again.\n\nThat's where Kazel comes in. With currently ~4kB it's pretty small (due to development it's not completely optimized yet, target size is below 3kB) and it exposes only DOM-APIs you already know.\n\n### Kazel\n\n```javascript\n// Selector\nconst elmnts = kazel`#mycontainer \u003e div.tochange`\n\n// Works like a charm!\nelmnts.classList.add('anyclass')\n\n// Also easy possible\nelmnts.innerText = 'sometext'\n\n// If needed all array methods are also supported\nelmnts.forEach(/* do something */)\n```\n\n## Features\n\n- ### All-at-once change/manipulating of multiple elements\n  ```javascript\n  kazel`.alldivs`.innerHTML = 'Works!'\n  ```\n- ### Get properties of multiple elements\n  ```javascript\n  kazel`.mydivs`.classList.contains('opened')\n  // returns true if all '.mydivs' have class '.opened', else returns false\n  ```\n- ### Await for elements or elements to match selector\n  ```javascript\n  // in async function\n  const dynamicallyAddedElmnt = await kazel`#parent`(expect)`h1.dynamic`()\n  // Promise will be fulfilled if 'h1.dynamic' is a child of '#parent'\n  ```\n- ### Check relation between given HTMLElements\n  ```javascript\n  kazel`${myElmnt} \u003e ${otherElmnt}`(matches)\n  // returns true if myElmnt has direct child otherElmnt\n  ```\n- ### Combination and Currying\n\n  ```javascript\n  const selectInMyDiv = kazel`#myDiv`\n  selectInMyDiv`.child-of-myDiv`()\n\n  // or combinating\n  document.querySelectorAll('div span a, div button a, div .children a')\n  // equals\n  kazel`div``span, button, .children``a`() // way easier\n  ```\n\n- ### Select in given elements\n  ```javascript\n  kazel(referenceToElmnt, otherElmnt)`.children`()\n  ```\n- ### Shadow Root\n  ```javascript\n  kazel`#elmntWithShadowDom`(deep)`.elmntsInShadowRoot`\n  ```\n\n## Usage\n\n### Import modules\n\n`kazel.js` provides all modules, the main module is called kazel\n\n**Import kazel**\n\n```javascript\nimport { kazel } from './minified/kazel.min.js'\n```\n\n**Use it**\nkazel is a so-called tag-function, so you can call it with a template string like this:\n\n```javascript\nkazel`selector`()\n```\n\nYou can add as many template strings as you want, just make sure that the previous still returns elements\n\n```javascript\nkazel`one``two``and so on…`()\n```\n\nIf you want to start selecting from given elements, just pass them before the template string or include them in the template string\n\n```javascript\nkazel(document.body, document.head)`selectors`()\n// or\nkazel`${document.body} \u003e .children`()\n```\n\nTo select an element that will be added dynamically use the `expect` - Custom Filter (`import {kazel, expect} from './kazel.js'`):\n\n```javascript\n// in async function\nconst elmnt = await kazel`selectorToStaticParent`(\n  expect,\n)`dynamic Child selector`()\n```\n\nThe selectorToStaticParent doesn't have to be the parentNode of the dynamic child, it can be anywhere above the dynamic child.\n\n## **! Always add empty parentheses after the template string to get all results !**\n\nIf you want to change a property on multiple elements, just select then start changing the property just like you would do on a single element:\n\n```javascript\nkazel`.elementsToChange`.style = 'background: red;'\n```\n\nAll HTMLElement props and methods (like classList) should work, if not, please create an Issue.\n\n\u003e Note: more docs will be added soon, for question or bugs please create an issue\n\n\u003e TODOs:\n\u003e\n\u003e - Optimize selecting for given elements\n\u003e - Improve error handling\n\u003e - Reduce code\n\u003e - Add index.html and index.js with useful examples\n\n\u003e Next features (create an issue for feature request):\n\u003e\n\u003e - CustomElements-Support (currently custom properties are not supported)\n\u003e - Create DOM with Kazel\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosimst%2Fkazel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkosimst%2Fkazel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosimst%2Fkazel/lists"}