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-utilsFollow Semantic Versioning and use np and a version like patch | minor | major | prepatch | preminor | premajor | prerelease | 1.2.3
np patchimport {
$,
createChild
} from '@hdsydsvenskan/dom-utils';
const elem = $('.a-nice-selector');
createChild(elem, 'div', 'a-nice-selector__bemish-elem', 'With some nice text in it');- ElementContainer
- ensureElementContainer
- ensureHTMLElement
- ensureHTMLElements
- $$
- $
- addText
- hasClass
- removeClass
- addClass
- toggleClass
- appendChild
- setAttributes
- removeElement
- emptyElement
- getDataAttribute
- setDataAttribute
- createElement
- createChild
- closestByClass
- elemByClass
- elemsByClass
- insertBefore
Type: (Document | DocumentFragment | Element)
Mostly for internal use. Ensures that the node is of an element container type, mostly helps type validation
elemNode
Returns (ElementContainer | undefined)
Mostly for internal use. Ensures that the node is an actual HTML element, mostly helps type validation
elemT
Mostly for internal use. Ensures that a list of nodes only contains HTML elements, mostly helps type validation
elemsArray<T>
Get an array of HTML elements that matches the specified selector
selectorTcontextElementContainer? If set, only looks up elements within the context container
Like $$, but returns only a single HTML element
If one needs to match against the context container element itself, then use elemByClass instead
selectorTcontextElementContainer?
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
elemElementContainerchildren...Node
Helper to easily set a collection of attributes
elemElementattributes
elemElement
Returns void
Meta
- deprecated: Use element.remove() instead
Iterates over all children in a container and removes them all
elemElementContainer
Helper that makes one don't have to do kebab case conversion oneself
elemHTMLElementattributestring Should be in kebab case
Helper that makes one don't have to do kebab case conversion oneself
elemHTMLElementattributestring Should be in kebab casevaluestring
Helper 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.
elemElementContainertagstringclassNameOrAttributestextstring?
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
classNamestringcontextElementContainer?
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
classNamestringcontextElementContainer?
Returns Array<HTMLElement>
elemNodechildT
Returns T