{"id":24383361,"url":"https://github.com/firstandthird/domassist","last_synced_at":"2025-04-11T01:12:23.070Z","repository":{"id":45142221,"uuid":"77558382","full_name":"firstandthird/domassist","owner":"firstandthird","description":"Various dom helpers","archived":false,"fork":false,"pushed_at":"2024-12-04T01:31:31.000Z","size":398,"stargazers_count":3,"open_issues_count":4,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-11T01:12:16.737Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firstandthird.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-28T20:08:35.000Z","updated_at":"2022-01-05T21:48:18.000Z","dependencies_parsed_at":"2024-12-04T02:25:29.029Z","dependency_job_id":null,"html_url":"https://github.com/firstandthird/domassist","commit_stats":{"total_commits":111,"total_committers":13,"mean_commits":8.538461538461538,"dds":0.8018018018018018,"last_synced_commit":"d8b3e2bdab03c90ca2fa44e7228dd7bc317f1648"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fdomassist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fdomassist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fdomassist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fdomassist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firstandthird","download_url":"https://codeload.github.com/firstandthird/domassist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322571,"owners_count":21084337,"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":[],"created_at":"2025-01-19T10:14:20.349Z","updated_at":"2025-04-11T01:12:23.049Z","avatar_url":"https://github.com/firstandthird.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# domassist\n\n[![Build Status](https://travis-ci.org/firstandthird/domassist.svg?branch=master)](https://travis-ci.org/firstandthird/domassist)\n![npm](https://img.shields.io/npm/v/domassist.svg)\n\nThis is a collection of functions designed to make working the DOM easier.\n\n## Installation\n\n```sh\nnpm install domassist\n```\n\n## Usage\n\nIn your project import the library:\n\n```js\nimport domassist from 'domassist'\n```\n\nThe first argument for each method you are interested is either a selector, DOM node, or a collection of\nDOM Nodes\n\n```javascript\nconst els = domassist.find('.my-class');\ndomassist.addClass(els, 'my-new-class');\n```\n\n## API\n\n- [find](#findselector-context)\n- [findOne](#findoneselector-context)\n- [addClass](#addclassselector-classes)\n- [removeClass](#removeclassselector-classes)\n- [toggleClass](#toggleclassselector-class)\n- [hasClass](#hasclassselector-class)\n- [html](#htmlselector-value)\n- [closest](#closestelement-selector)\n- [delegate](#delegateelement-event-selector-callback-capture)\n- [hide](#hideselector)\n- [hover](#hoverelement-enter-exit)\n- [matches](#matches)\n- [modify](#modifyselector-params)\n- [on](#onselector-event-callback-capture)\n- [off](#offselector-event)\n- [once](#onceelement-event-callback-capture)\n- [ready](#readycallback)\n- [show](#showselector)\n- [styles](#stylesselector-styles)\n- [addAttrs](#addattrsselector-attributes)\n- [remove](#removeselector-context)\n\n### find(selector, [context])\n\nFind elements on the page based on a valid CSS selector.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList} - A valid CSS selector. If a NodeList is passed it will be converted to an Array.\n\n`[context]` - Where to start looking for the selector.\n\n#### Returns:\n\n`Array` - If no element is found an empty array is returned.\n\n#### Example:\n\n```javascript\ndomassist.find('p'); // find all paragraph tags\ndomassist.find('[type=\"text\"]', document.forms[0]); // find all text fields in the first form\n```\n\n### findOne(selector, [context])\n\nFind a single element on a page. If more than one element is found for a selector, the first instance is returned.\n\nIf no element is found `null` is returned\n\n#### Parameters:\n\n`selector` - {string} A valid CSS selector\n\n`[context]` - Where to start looking for the selector.\n\n#### Returns:\n\n`Element|null` - If no element is found `null` is returned.\n\n### addClass(selector, classes)\n\nAdd one or more classes to an element(s). For multiple classes pass an array.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList} - A valid CSS selector. If a NodeList is passed it will be converted to an Array.\n\n`classes` - {string|Array} The class or classes to add.\n\n#### Returns:\n\n`Array` - An array of elements that classes were applied to.\n\n#### Example:\n\n```javascript\ndomassist.addClass('.my-div', 'new-class');\ndomassist.addClass('.my-div', ['class-1', 'class-2', 'class-3']);\n```\n\n### removeClass(selector, classes)\n\nRemove one or more classes to an element(s). For multiple classes pass an array.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList} - A valid CSS selector. If a NodeList is passed it will be converted to an Array.\n\n`classes` - {string|Array} The class or classes to add.\n\n#### Returns:\n\n`Array` - An array of elements that classes were applied to.\n\n#### Example:\n\n```javascript\ndomassist.removeClass('.my-div', 'new-class');\ndomassist.removeClass('.my-div', ['class-1', 'class-2', 'class-3']);\n```\n\n\n### toggleClass(selector, class)\n\nAdd a class if it doesn't exist and vice versa if it does.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList} - A valid CSS selector. If a NodeList is passed it will be converted to an Array.\n\n`class` - {string} The class to toggle.\n\n#### Example:\n\n```javascript\n// new-class does not exist on element\ndomassist.toggleClass('.my-div', 'new-class'); // class added\ndomassist.toggleClass('.my-div', 'new-class'); // class removed\n```\n\n\n### hasClass(selector, class)\n\nFind out if an element has a class assigned or not.\n\n#### Parameters:\n\n`selector` - {string|Element} - A valid CSS selector.\n\n`class` - {string} - The class to check for.\n\n#### Returns:\n\n`Boolean` - True is returned if the class exist.\n\n\n### html(selector, value)\n\nUpdate inner HTML of an element.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList} - A valid CSS selector, HTML element, or.\n\n`classes` - {string|Array} The class or classes to add.\n\n#### Example:\n\n```javascript\ndomassist.html('.my-div', 'hello world'); // add html\ndomassist.html('.my-div', ''); // remove html\n```\n\n### closest(element, selector)\n\nFind the closest parent element that matches the given selector\n\n#### Parameters:\n\n`element` - {Element} the element where you want to start looking from\n\n`selector` - {string} A valid CSS of the element to be found.\n\n### delegate(element, event, selector, callback, capture)\n\n### hide(selector)\n\nHide an element by setting it's css `display` to `none`.\n\nParameters:\n\n`selector` - {string|Element|NodeList}\n\n### hover(element, enter, exit)\n\nEasy way to add callbacks to the `mouseenter` and `mouseleave` events.\n\n#### Parameters:\n\n`element` - {Element}\n\n`enter` - {function} Callback to fire when user moves mouse over the supplied element.\n\n`exit` - {function} Callback to fire when user moves mouse off the supplied element.\n\n#### Examples:\n\n```javascript\ndomassist.hover('.my-div', (e) =\u003e {\n  console.log('mouse over');\n}, (e) =\u003e {\n  console.log('mouse out');\n});\n```\n\n\n### matches()\n\n\n### modify(selector, params)\n\nModify many parts of an element at once such as adding and removing classes, changing the element's html, or attaching events.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList}\n\n`params` - {object} An object of key:value pairs of what element parameters to change.\n\n#### Examples:\n\n```javascript\ndomassist.modify('.my-div', {\n  addClass: 'testing',\n  html: 'hello world',\n  events: {\n    click: (e) =\u003e {\n      // do something\n    },\n    mouseenter: (e) =\u003e {\n      // do something\n    },\n    mouseleave: (e) =\u003e {\n      // do something\n    }\n  },\n  styles: {\n    width: '100px',\n    height: '150px',\n  }\n});\n```\n\n### on(selector, event, callback, capture)\n\nAttach an event to an element based on a valid CSS selector or an Element.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList}\n\n`event` - {string} The name of the event to attach such as `click`, `mouseenter`, or `touchend`\n\n`callback` - {function} A function to be called when the supplied event is triggered.\n\n`[capture = false]` - {Boolean} Determines which phase to the attach the event to. Default is `false` when means the event is attached to the bubble phase. If `true` then it's attached to the capture phase.\n\n### Example:\n\n```javascript\ndomassist.on('a', 'click', (e) =\u003e {\n  e.preventDefault();\n  console.log('clicked!');\n});\n```\n\n\n### off(selector, event)\n\nRemove an attached event.\n\n#### Parameters\n\n`selector` - {string|Element|NodeList}\n\n`event` - {string} The name of the event to remove such as `click`, `mouseenter`, or `touchend`\n\n### Example:\n\n```javascript\ndomassist.off('a', 'click');\n```\n\n### once(element, event, callback, capture)\n\nAttach an event to an element to be fired once.\n\n#### Parameters:\n\n`selector` - {Element}\n\n`event` - {string} The name of the event to attach such as `click`, `mouseenter`, or `touchend`\n\n`callback` - {function} A function to be called when the supplied event is triggered.\n\n`[capture = false]` - {Boolean} Determines which phase to the attach the event to. Default is `false` when means the event is attached to the bubble phase. If `true` then it's attached to the capture phase.\n\n### Example:\n\n```javascript\ndomassist.once('a', 'click', (e) =\u003e {\n  e.preventDefault();\n  console.log('clicked!');\n});\n```\n\n### ready(callback)\n\nAdd a function to be called once the `DOMContentLoaded` event is fired. This is when the entire DOM has been finished downloading. You'll want to use this method to execute javascript on page load. You can call this method many times throughout your application allowing you to add multiple callbacks.\n\n#### Parameters:\n\n`callback` - {function} The function to be called once the page has finished loading.\n\n#### Example:\n\n```javascript\ndomassist.ready(() =\u003e {\n  const x = 1;\n  console.log('x is', x);\n});\ndomassist.ready(() =\u003e {\n  const x = 2;\n  console.log('x is', x);\n});\ndomassist.ready(() =\u003e {\n  const x = 3;\n  console.log('x is', x);\n});\n// x is 1\n// x is 2\n// x is 3\n```\n\n### show(selector)\n\nShow an element by setting an element's `display` to it's default display type.\n\nParameters:\n\n`selector` - {string|Element|NodeList}\n\n\n### styles(selector, styles)\n\nApply css styles to an element(s).\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList}\n\n`styles` - {object} CSS styles as a key:value pair, ex `{ width: '100px', height: '100px'}`.\n\n#### Example\n\n```javascript\ndomassist.styles('p', {\n  width: '100px',\n  height: '150px'\n});\n```\n\n### addAttrs(selector, attributes)\n\nAdd attributes to elements. If an attribute that is passed is not a valid attribute for the element it will be added as a `data-*` attribute.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList} The element(s) to apply new attributes to.\n\n`attributes` - {object} An object of attributes\n\n#### Example:\n\n```javascript\ndomassist.addAttrs('.my-div', {\n  id: 'anchor-id',\n  title: 'this is a title',\n  href: 'http://google.com',\n  testAttr: 'data attribute',\n});\ndomassist.addAttrs('a', {\n  id: 'anchor-id',\n  title: 'this is a title',\n  href: 'http://google.com',\n  testAttr: 'data attribute',\n});\n// \u003cdiv class=\"my-div\" id=\"anchor-id\" title=\"this is a title\" data-href=\"http://www.google.com\" data-test-attr=\"data attribute\"\u003e\u003c/div\u003e\n// \u003ca class=\"my-div\" id=\"anchor-id\" title=\"this is a title\" href=\"http://www.google.com\" data-test-attr=\"data attribute\"\u003e\u003c/a\u003e\n```\n\n### remove(selector, [context])\n\nRemove element(s) from the page based on a valid CSS selector.\n\n#### Parameters:\n\n`selector` - {string|Element|NodeList} - A valid CSS selector. If a NodeList is passed it will be converted to an Array.\n\n`[context]` - Where to start looking for the selector.\n\n#### Example:\n\n```javascript\ndomassist.remove('p'); // remove all paragraph tags\ndomassist.remove('[type=\"text\"]', document.forms[0]); // remove all text fields in the first form\n```\n\n## License\n\n### MIT License\n\nCopyright (c) 2019 First+Third\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Fdomassist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirstandthird%2Fdomassist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Fdomassist/lists"}