{"id":18277727,"url":"https://github.com/ctnicholas/quick-selector","last_synced_at":"2025-07-30T09:34:19.216Z","repository":{"id":39599669,"uuid":"282859439","full_name":"CTNicholas/quick-selector","owner":"CTNicholas","description":"Syntactic sugar for querySelector, querySelectorAll, \u0026 addEventListener allowing you to select, modify, and add event listeners for multiple elements in one line of code.","archived":false,"fork":false,"pushed_at":"2023-01-06T12:34:13.000Z","size":1467,"stargazers_count":1,"open_issues_count":13,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T07:22:46.306Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CTNicholas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-27T10:04:46.000Z","updated_at":"2022-01-01T17:02:09.000Z","dependencies_parsed_at":"2023-02-06T02:15:57.647Z","dependency_job_id":null,"html_url":"https://github.com/CTNicholas/quick-selector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CTNicholas/quick-selector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fquick-selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fquick-selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fquick-selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fquick-selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CTNicholas","download_url":"https://codeload.github.com/CTNicholas/quick-selector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fquick-selector/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267846552,"owners_count":24153977,"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","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-05T12:20:25.067Z","updated_at":"2025-07-30T09:34:19.179Z","avatar_url":"https://github.com/CTNicholas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quick selector\n\nSyntactic sugar for `querySelector`, `querySelectorAll`, \u0026 `addEventListener` allowing you to select, modify, and add event listeners for multiple elements in one line of code. Tiny package (\u003c1KB GZIP). All Javascript events are supported.\n\n## Install\n\n### Node\n\n```shell\nnpm install quick-selector\n```\n\n```javascript\nimport qs from 'quick-selector'\n// or\nconst qs = require('quick-selector')\n```\n\n### Browser\n\n``` html\n\u003cscript src=\"https://unpkg.com/quick-selector/dist/qs.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Selecting\n\nSelecting `\u003cdiv class=\"box\"\u003e` elements, use any CSS selectors:\n\n```javascript\nconst boxes = qs`div.box`\n```\n\n*This always returns an array of elements, not just one element.*\n\n### Events\n\nAdding and removing click event listener:\n\n```javascript\nconst clickEvent = () =\u003e console.log('Clicked!')\nqs`#custom-button`.click(clickEvent)\n```\n\nRemoving event listener:\n\n```javascript\nqs`#custom-button`.remove.click(clickEvent)\n```\n\n### Filtering\n\nSelecting only `.element` elements with the `innerHTML` value of 'Apples':\n\n```javascript\nconst filtered = qs`.subtitle`.filter(element =\u003e element.innerHTML === 'Apples')\n```\n\nSelecting only the first `.subtitle` element and adding a class  (`only(0)` returns the first selected element, `only(1)` returns the second, etc.):\n\n```javascript\nqs`.subtitle`.only(0).set(element =\u003e element.classList.add = 'first-subtitle')\n```\n\n### Setting \u0026 getting\n\nSetting text colour of elements to red:\n\n```javascript\nqs`p`.set(el =\u003e el.style.color = 'red')\n```\n\nGetting an array containing the text content of each `\u003cp\u003e` element:\n\n```javascript\nconst paragraphText = qs`p`.get(el =\u003e el.textContent)\n```\n\n### Modifying vanilla-selected elements\n\nAdding a blur event to a list of elements selected with `querySelectorAll`:\n\n```javascript\nconst elementList = document.querySelectorAll('input')\nqs(elementList).blur(event =\u003e console.log(`${event.target} lost focus`))\n```\n\n## Comparison\n\n### Selecting and adding two event listeners\n\n```javascript\n// Quick selector\nqs`input.email`.input(ev =\u003e console.log(ev.target.value)).click(ev =\u003e ev.target.value = '')\n\n// Vanilla JS\nconst emailInput = document.querySelectorAll('input.email')\nfor (const input of emailInput) {\n  input.addEventListener('input', ev =\u003e {\n    console.log(ev.target.value)\n  })\n  input.addEventListener('click', ev =\u003e {\n    ev.target.value = ''\n  })\n}\n```\n\n### Selecting, filtering selection, adding event listener, setting text colour\n\n```javascript\nconst clickFunc = () =\u003e console.log(\"I've been clicked\")\n\n// Quick selector\nqs`p.text`.filter(el =\u003e el.innerHTML.startsWith('Hello')).click(clickFunc).set(el =\u003e el.style.color = 'red')\n\n// Vanilla\nconst textBox = document.querySelectorAll('p.text')\nfor (const box of textBox) {\n  if (box.innerHTML.startsWith('Hello')) {\n    box.addEventListener('click', clickFunc)\n    box.style.color = 'red'\n  }\n}\n```\n\n### Adding a change event to every other textarea, from the second\n\n```javascript\n// Quick selector\nqs`textarea`.filter((el, index) =\u003e index % 2).change(ev =\u003e ev.target.value = 'Changed')\n\n// Vanilla\nconst textareas = querySelectorAll('textarea')\nfor (i = 0; i \u003c textareas.length; i++) {\n  if (i % 2) {\n    textareas[i].addEventListener('change', ev =\u003e {\n      ev.target.value = 'Changed'\n    })\n  }\n}\n\n// Vanilla functional\nconst textareas = Array.from(querySelectorAll('textarea'))\ntextareas.filter((el, index) =\u003e index % 2).forEach(el =\u003e {\n  el.addEventListener('change', ev =\u003e {\n    ev.target.value = 'Changed'\n  })\n})\n```\n\n## API\n\n### Query function\n\n| Function   | Arguments                                                    | Returns                                                      |\n| ---------- | ------------------------------------------------------------ | ------------------------------------------------------------ |\n| qs``, qs() | *String* or *Array*. Input a CSS selector text string, or an array of HTML elements | An array of HTML elements, with a special set of methods attached |\n\n### Query function methods\n\n| Method         | Arguments                                                    | Returns                                                     | Notes                                                        |\n| -------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | ------------------------------------------------------------ |\n| .*eventName*() | *Function*. A function to be added to the event.             | The templated array it was called upon.                     | Every single event compatible with the user's browser will work. See Examples:  `.click`, `.mousedown`, `.blur`. |\n| .remove        | *None*. Use in conjunction with an *eventName*() method.     | N/A                                                         | Use `.remove` before an *eventName*() function, with the original function as the argument. Example: `.remove.click(clickFunction)`. |\n| .set()         | *Function*. Pass a function that will be applied to a `Array.forEach()` method, iterating through the object. | The templated array it was called upon.                     | More info on [Array.forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - MDN. |\n| .get()         | *Function*. Pass a function that will be applied to a Array`.map()` method, iterating through the object. | A new array containing the return values from the function. | More info on [Array.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - MDN. |\n| .filter()      | *Function*. Pass a function that will be applied to a Array`.filter()` method, iterating through the object. | A templated array containing only the filtered elements.    | More info on [Array.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - MDN. |\n| .only()        | *Number*. Pass a positive integer, corresponding to the index of the item in the quick-select array. | A templated array containing only the selected element.     | `.only(0)` selects the first item on the page that matched the quick-select query, `only(1)` selects the second, etc. |\n\nNote: All Array methods work, but the above methods all return a templated quick-select array (apart from `.get()`), and can be used with method chaining.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctnicholas%2Fquick-selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctnicholas%2Fquick-selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctnicholas%2Fquick-selector/lists"}