{"id":22355424,"url":"https://github.com/makingstuffs/making-stuffs-queries","last_synced_at":"2025-07-30T10:31:40.445Z","repository":{"id":42960670,"uuid":"228405398","full_name":"MakingStuffs/making-stuffs-queries","owner":"MakingStuffs","description":"A lightweight library to make querying the DOM and creating elements that little bit easier","archived":false,"fork":false,"pushed_at":"2023-02-04T17:46:51.000Z","size":761,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-29T14:52:16.691Z","etag":null,"topics":["dom-manipulation","javascript","javascript-library","library"],"latest_commit_sha":null,"homepage":null,"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/MakingStuffs.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":"2019-12-16T14:29:01.000Z","updated_at":"2024-05-17T04:24:00.000Z","dependencies_parsed_at":"2023-02-15T17:16:08.013Z","dependency_job_id":null,"html_url":"https://github.com/MakingStuffs/making-stuffs-queries","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakingStuffs%2Fmaking-stuffs-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakingStuffs%2Fmaking-stuffs-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakingStuffs%2Fmaking-stuffs-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MakingStuffs%2Fmaking-stuffs-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MakingStuffs","download_url":"https://codeload.github.com/MakingStuffs/making-stuffs-queries/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228124671,"owners_count":17873170,"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-manipulation","javascript","javascript-library","library"],"created_at":"2024-12-04T14:06:29.247Z","updated_at":"2024-12-04T14:06:29.954Z","avatar_url":"https://github.com/MakingStuffs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Making Stuffs Queries\n\n![Tests](https://github.com/makingstuffs/making-stuffs-queries/actions/workflows/tests.yml/badge.svg)\n![Build](https://github.com/makingstuffs/making-stuffs-queries/actions/workflows/build.yml/badge.svg)\n![Release](https://github.com/makingstuffs/making-stuffs-queries/actions/workflows/release.yml/badge.svg)\n\nA simple lightweight library to make DOM querying and manipulation a little less laborious. The main purpose of this library is to save time from having to write out `document.someKindOfFunction` every time you wish to interact with the DOM.\n\nIn order to add this functionality to a simple static webpage simply include the build file in the _dist_ folder, or clone the repo and rebuild the files yourself.\n\nTo add the library to your npm project simply run `npm i -D making-stuffs-queries`.\n\nI will continue adding to this repo as, and when, I create new functions which I think are beneficial. If you have any suggestions or find any bugs please feel free to report them or make a pull request.\n\nAnyway, here are some examples:\n\n## msQuery()\n\nReplaces `document.querySelector()` and takes two optional arguments:\n\n1. A selector (typeof `string`), to be used as you would use the standard syntax for `document.querySelector`. Defaults to `body`.\n\n2. An element (typeof `HTMLElement`), to be passed if you wish to query a specific element. Defaults to `document`.\n\n### Example 1: Calling an Element with a Class of 'example'\n\n```\nconst example = msQuery('.example');\n```\n\n### Example 2: Calling an Element with an ID of 'example'\n\n```\nconst example = msQuery('#example');\n```\n\n### Example 3: Calling an Element with a href of 'github.com'\n\n```\nconst example = msQuery('[href=\"github.com\"]');\n```\n\n### Example 4: Calling the First `\u003cdiv\u003e\u003c/div\u003e` on the Page\n\n```\nconst example = msQuery('div');\n```\n\n## msQueryAll()\n\nReplaces `document.querySelectorAll()` and takes one optional argument:\n\n1. A selector (typeof `string`), to be used as you would with the standard syntax for `document.querySelectorAll`. Defaults to `a`.\n\n### Example 1: Get all elements with a class of 'test'\n\n```\nconst elemList = msQueryAll('.test');\n```\n\n## msCreate()\n\nReplaces the default `document.createElement()` function and takes two optional arguments:\n\n1. An element `tagName` (typeof `string`), used as you would use the standard syntax for the `document.createElement()` function. Defaults to `div`.\n\n2. An object containing attributes in a key/value pair system (typeof `object`). To be used as if each key/value pair is being fed into the `setAttribute()` function.\n\nIf you would like to add hyphenated attributes to the created element, such as data attributes, you need to add them with an underscore. For example, if you wished to add `data-index` attribute you would pass an object in the second argument with the following: `{ data_index: 'an index' }`.\n\nIf you would like to set some content for the newly created element you can do so by simply adding an `innerHTML` key to the object passed for the second parameter. For example, to create a `\u003ch1\u003e\u003c/h1\u003e` element with a title of _Hey_ you would add the following to your options object: `{ innerHTML: 'Hey' }`.\n\n### Example 1: Create a `\u003cdiv\u003e\u003c/div\u003e` with a class of 'test'\n\n```\nconst elem = msCreate(null, { class: 'test' });\n```\n\n### Example 2: Create an anchor link with a href of 'github.com', data-role of 'button', class of 'test', and content of 'Anchor link'\n\n```\nconst link = msCreate('a', { href: 'github.com', data_role: 'button', class: 'test', innerHTML: 'Anchor Link' });\n```\n\n## msAppend()\n\nReplaces the default document.append() and takes two arguments:\n\n1. Either an element (typeof `HTMLElement`) or an array of elements which are to be appended to the parent. Required.\n\n2. An element (typeof `HTMLElement`) to which the provided child nodes will be appended. If no argument is provided the function will default to `document.body`\n\n### Example 1: Append an array of elements to the document body\n\n```\nmsAppend([element1, element2]);\n```\n\n### Example 2: Append an array of elements to a provided parent\n\n```\nmsAppend([element1, element2], parentElement);\n```\n\n### Example 3: Append a single element to the document body\n\n```\nmsAppend(element);\n```\n\n### Example 4: Append a single element to a passed parent element\n\n```\nmsAppend(childElement, parentElement);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakingstuffs%2Fmaking-stuffs-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakingstuffs%2Fmaking-stuffs-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakingstuffs%2Fmaking-stuffs-queries/lists"}