{"id":21524870,"url":"https://github.com/degjs/domutils","last_synced_at":"2025-03-17T18:17:49.726Z","repository":{"id":36869366,"uuid":"41176338","full_name":"DEGJS/domUtils","owner":"DEGJS","description":"A utility library for working with the DOM.","archived":false,"fork":false,"pushed_at":"2022-12-12T02:37:48.000Z","size":852,"stargazers_count":1,"open_issues_count":10,"forks_count":1,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-02-28T12:24:39.923Z","etag":null,"topics":["utility"],"latest_commit_sha":null,"homepage":"","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/DEGJS.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":"2015-08-21T20:34:47.000Z","updated_at":"2021-01-25T21:11:42.000Z","dependencies_parsed_at":"2023-01-17T06:12:49.964Z","dependency_job_id":null,"html_url":"https://github.com/DEGJS/domUtils","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FdomUtils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FdomUtils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FdomUtils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2FdomUtils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DEGJS","download_url":"https://codeload.github.com/DEGJS/domUtils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085010,"owners_count":20395523,"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":["utility"],"created_at":"2024-11-24T01:30:09.622Z","updated_at":"2025-03-17T18:17:49.708Z","avatar_url":"https://github.com/DEGJS.png","language":"JavaScript","readme":"# domUtils\n![Run Tests](https://github.com/DEGJS/domUtils/workflows/Run%20Tests/badge.svg)\n\nWorking with the browser's Document Object Model (DOM) via JavaScript has historically been harder than it should be, filled with enough inconsistencies and browser bugs to drive even the best developer crazy. These challenges were a huge factor in the ubiquity of JavaScript helper libraries such as jQuery across the web.\n\nFortunately, those days are largely behind us. Modern-day DOM interaction is simpler and more consistent, to the point where jQuery shouldn't be an assumed dependency anymore ([no, really](http://youmightnotneedjquery.com/)).\n\ndomUtils bridges the gap between vanilla JS and a full-fledged library. It's a collection of helper methods that can be imported individually to keep your codebase lean, or together when more are needed.\n\n## Install\ndomUtils is an ES6 module. Consequently, you'll need an ES6 transpiler ([Babel](https://babeljs.io) is a nice one) as part of your Javascript workflow.\n\nIf you're already using NPM for your project, you can install domUtils with the following command:\n\n```\n$ npm install @degjs/dom-utils\n```\n\n## Usage\n\n### Importing individual domUtils methods:\n```js\nimport { createElement } from \"@degjs/dom-utils\";\n\nlet newEl = createElement('div', ['classNameA', 'classNameB']); // Create a new element\ndocument.body.appendChild(newEl); // Add the new element to the DOM\n```\n\n### Importing all domUtils methods:\n```js\nimport * as domUtils from \"@degjs/dom-utils\";\n\nlet newEl = domUtils.createElement('div', ['classNameA', 'classNameB']); // Create a new element\ndocument.body.appendChild(newEl); // Add the new element to the DOM\ndomUtils.removeElements(newEl); // Remove the new element from the DOM\n```\n\n## Methods\n\n### isElement(el)\nThe isElement method tests a supplied value to see if it's a valid HTML element, and returns `true` or `false`.\n\n#### el\nType: `Element`  \nThe potential element to test.\n\n### createElement(nodeName, classNames)\n\n#### nodeName\nType: `String`  \nThe name of the new HTML element you want to create (i.e., 'div', 'li', etc.).   \n\n#### classNames\nType: `String` or `Array`  \nAn indivudal class name, or array of class names, that will be added to the returned element.\n\n### emptyElements(els)\nThe emptyElements method removes all child elements from the supplied list of HTML elements.\n#### els\nType: `Element` or `Array`   \nA single HTML element or an array of HTML elements that will be emptied.\n\n### replaceContent(el, newContent)\nThe replaceContent method replaces an element's content with the supplied new content.\n#### el\nType: `Element`   \nA single HTML element that will have its content replaced.\n#### newContent\nType: `String`   \nThe content that will replace the element's old content.\n\n### removeElements(els)\nThe removeElements method removes all supplied HTML elements from the DOM.\n#### els\nType: `Element` or `Array`   \nA single HTML element or an array of HTML elements that will be removed.\n\n### wrapElements(elsToWrap, wrapperEl)\nThe wrapElements method wraps all supplied HTML elements within another supplied element.\n#### elsToWrap\nType: `Element` or `Array`   \nA single HTML element or an array of HTML elements that will be wrapped by the `wrapperEl` element.\n\n#### wrapperEl\nType: `Element`   \nA single HTML element that will be wrapped around the supplied `elsToWrap` elements.\n\n### unwrapElements(wrapperEls)\nThe unwrapElements method removes a wrapping parent HTML element, leaving all of its child elements in place.\n#### wrapperEls\nType: `Element` or `Array`   \nA single HTML element or an array of HTML elements that will be removed, without removing child elements.\n\n## Browser Support\n\ndomUtils depends on the following browser APIs:\n+ classList: [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) | [Polyfill](https://github.com/eligrey/classList.js/)\n+ forEach: [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) | [Polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Polyfill)\n\nTo support legacy browsers, you'll need to include polyfills for the above APIs.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fdomutils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdegjs%2Fdomutils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fdomutils/lists"}