@hdsydsvenskan/dom-utils
Advanced tools
Basic small typed DOM helpers that aids in the creation of vanilla JS code
Basic small typed DOM helpers that aids in the creation of vanilla JS code.
Makes it easy to query, create and modify DOM-nodes – consider it a mini-jQuery. Somewhat inspired by Bliss.js.
yarn add @hdsydsvenskan/dom-utils
Follow Semantic Versioning and use np and a version like patch | minor | major | prepatch | preminor | premajor | prerelease | 1.2.3
np patch
import {
$,
createChild
} from '@hdsydsvenskan/dom-utils';
const elem = $('.a-nice-selector');
createChild(elem, 'div', 'a-nice-selector__bemish-elem', 'With some nice text in it');
Type: (Document | DocumentFragment | Element)
Mostly for internal use. Ensures that the node is of an element container type, mostly helps type validation
elem NodeReturns (ElementContainer | undefined)
Mostly for internal use. Ensures that the node is an actual HTML element, mostly helps type validation
elem TMostly for internal use. Ensures that a list of nodes only contains HTML elements, mostly helps type validation
elems Array<T>Get an array of HTML elements that matches the specified selector
selector Tcontext ElementContainer? If set, only looks up elements within the context containerLike $$, but returns only a single HTML element
If one needs to match against the context container element itself, then use elemByClass instead
selector Tcontext ElementContainer?Adds text nodes to the supplied element, persisting newlines by adding br elements for each newline
Returns boolean
Returns void
Returns void
Returns void
Helper to append many children nodes at once
elem ElementContainerchildren ...NodeHelper to easily set a collection of attributes
elem Elementattributeselem ElementReturns void
Meta
Iterates over all children in a container and removes them all
elem ElementContainerHelper that makes one don't have to do kebab case conversion oneself
elem HTMLElementattribute string Should be in kebab caseHelper that makes one don't have to do kebab case conversion oneself
elem HTMLElementattribute string Should be in kebab casevalue stringHelper to easily create a new HTML element, with all that one would need for that
Returns HTMLElement
Like createElement, but also appends the created element to a container
Helpful when creating multiple elements within one another as one can then send the result of one as the container to the other.
elem ElementContainertag stringclassNameOrAttributestext string?Returns HTMLElement
Iterates over the parents of a node and returns the first one that has the specified class name
Returns (HTMLElement | undefined)
Like $, but with class name rather than selector + also matches against the context itself, not just elements within it
className stringcontext ElementContainer?Returns (HTMLElement | undefined)
Like elemByClass but replaces $$ instead and either returns the context itself if it matches, or a list of matching elements within it
className stringcontext ElementContainer?Returns Array<HTMLElement>
elem Nodechild TReturns T
FAQs
Basic small typed DOM helpers that aids in the creation of vanilla JS code
The npm package @hdsydsvenskan/dom-utils receives a total of 2,553 weekly downloads. As such, @hdsydsvenskan/dom-utils popularity was classified as popular.
We found that @hdsydsvenskan/dom-utils demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.