{"id":42676835,"url":"https://github.com/rafaucau/ts-dom-utils","last_synced_at":"2026-02-26T23:04:30.487Z","repository":{"id":169834468,"uuid":"645821804","full_name":"rafaucau/ts-dom-utils","owner":"rafaucau","description":"A simple utility library for DOM manipulation. Provides TypeScript typings for enhanced development experience in TS environments.","archived":false,"fork":false,"pushed_at":"2026-02-26T21:16:25.000Z","size":161,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-26T21:18:53.603Z","etag":null,"topics":["dom","dom-manipulation","javascript","library","typescript","utility"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ts-dom-utils","language":"TypeScript","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/rafaucau.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"rafaucau"}},"created_at":"2023-05-26T14:09:36.000Z","updated_at":"2026-02-26T21:16:08.000Z","dependencies_parsed_at":"2026-01-29T12:02:48.460Z","dependency_job_id":null,"html_url":"https://github.com/rafaucau/ts-dom-utils","commit_stats":null,"previous_names":["rafaucau/ts-dom-utils"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/rafaucau/ts-dom-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaucau%2Fts-dom-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaucau%2Fts-dom-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaucau%2Fts-dom-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaucau%2Fts-dom-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafaucau","download_url":"https://codeload.github.com/rafaucau/ts-dom-utils/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafaucau%2Fts-dom-utils/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29876371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T22:37:10.609Z","status":"ssl_error","status_checked_at":"2026-02-26T22:37:09.019Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["dom","dom-manipulation","javascript","library","typescript","utility"],"created_at":"2026-01-29T11:32:06.703Z","updated_at":"2026-02-26T23:04:30.477Z","avatar_url":"https://github.com/rafaucau.png","language":"TypeScript","funding_links":["https://github.com/sponsors/rafaucau"],"categories":[],"sub_categories":[],"readme":"# TS Dom Utils\nA lightweight TypeScript library that provides simple wrappers around common DOM manipulation functions.\nIt allows you to write less code.\nAlthough it's written in TypeScript, it can also be used in JavaScript projects.\n\n## Table of Contents\n\n\n- [Installation](#installation)\n- [Features](#features)\n- [Functions](#functions)\n    - [createElement](#createelement)\n    - [DOMisReady](#domisready)\n    - [qs](#qs)\n    - [qsa](#qsa)\n- [How to Contribute](#how-to-contribute)\n- [Support This Project](#support-this-project)\n\n## Installation\n\n```shell\n# npm\nnpm install ts-dom-utils\n# or Yarn\nyarn add ts-dom-utils\n```\n\n## Features\n- Strong TypeScript typings for better editor autocompletion and error checking.\n- Compatible with both TypeScript and JavaScript projects.\n- Simple and intuitive API.\n- Tree-shakeable\n\n\n## Functions\n\n### `createElement`\nCreates a new element with the provided options.\n\nExample\n```typescript\nimport { createElement } from 'ts-dom-utils';\n\nconst button = createElement('button', {\n  id: 'my-button',\n  class: ['btn', 'btn-primary'],\n  text: 'Click me',\n  on: {\n    // simple function\n    click: (event) =\u003e {\n      console.log('clicked!', event)\n    },\n    // object with handler and options\n    mouseover: {\n      handler: (event) =\u003e console.log('hovered once!'),\n      options: { once: true }\n    }\n  },\n  dataset: {\n    action: 'open-menu',\n  },\n  'aria-expanded': 'false',\n});\n\ndocument.body.appendChild(button);\n// \u003cbutton id=\"my-button\" class=\"btn btn-primary\" data-action=\"open-menu\" aria-expanded=\"false\"\u003eClick me\u003c/button\u003e\n```\n\n| Param   | Default   | Description                                                                                                                                                                               |\n|---------|-----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| tagName | undefined | The tag name of the element type to create.                                                                                                                                               |\n| options | {}        | The options to use when creating the element. Options can include any attributes that can be passed to `setAttribute`, with `class`, `text`, and `on` as special options for enhancement. |\n| target  | document  | The Document in which to create the element.                                                                                                                                              |\n---\n\n## `DOMisReady`\n`DOMisReady` is a function that returns a Promise. This Promise resolves when the provided DOM is ready, i.e., when the document's readyState is not 'loading'. This can be used to delay script execution until the DOM is fully constructed and can be safely manipulated.\n```typescript\nimport { DOMisReady, qs } from 'ts-dom-utils';\n\n// using then\nDOMisReady().then(() =\u003e {\n  // DOM manipulation code here\n});\n\n// using async/await\n(async function() {\n  await DOMisReady();\n  // DOM manipulation code here\n})();\n\n// checking if an iframe's document is ready\nconst iframe = qs\u003cHTMLIFrameElement\u003e('iframe');\nDOMisReady(iframe.contentDocument).then(() =\u003e {\n  // iframe DOM manipulation code here\n});\n\n```\n| Param | Default   | Description             |\n|-------|-----------|-------------------------|\n| doc   | document  | The Document to check.  |\n---\n\n### `qs`\nA wrapper function for `querySelector`.\n\nExample\n```typescript\nimport { qs } from 'ts-dom-utils';\n\nconst container = qs\u003cHTMLDivElement\u003e('.footer \u003e .buttons');\nconst button = qs('button', container);\n```\n| Param    | Default   | Description                      |\n|----------|-----------|----------------------------------|\n| selector | undefined | The selector to match against.   |\n| parent   | document  | The ParentNode to search within. |\n\n---\n \n### `qsa`\nA wrapper function for `querySelectorAll`.\n\nExample\n```typescript\nimport { qsa } from 'ts-dom-utils';\n\nconst buttons = qsa\u003cHTMLButtonElement\u003e('.btn');\n\nconst menu = qs\u003cHTMLDivElement\u003e('.menu');\nconst menuButtons = qsa\u003cHTMLButtonElement\u003e('.btn', menu);\n```\n\n| Param    | Default   | Description                      |\n|----------|-----------|----------------------------------|\n| selector | undefined | The selector to match against.   |\n| parent   | document  | The ParentNode to search within. |\n\n## How to Contribute\n\nWe welcome any contributions! If you have an idea for a new feature or tool, please feel free to open an issue to discuss it. You can also submit a pull request if you've developed a feature or fix that you'd like to contribute back.\n\n### Support This Project\n\nThis project is developed and maintained by a single developer. If you find it useful and would like to support its continued development, you can do so through [GitHub Sponsors](https://github.com/rafaucau/ts-dom-utils?sponsor=1). Any amount is appreciated!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaucau%2Fts-dom-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafaucau%2Fts-dom-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafaucau%2Fts-dom-utils/lists"}