@hdsydsvenskan/dom-utils

Basic small typed DOM helpers that aids in the creation of vanilla JS code

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@hdsydsvenskan/dom-utils
261.0.02 years ago2 years agoMinified + gzip package size for @hdsydsvenskan/dom-utils in KB

Readme

DOM Utils
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.

Installation

yarn add @hdsydsvenskan/dom-utils

Release new version

Follow Semantic Versioning and use np and a version like patch | minor | major | prepatch | preminor | premajor | prerelease | 1.2.3
np patch

Usage

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');

Methods and types

Table of Contents

ElementContainer

Type: (Document \| DocumentFragment \| Element)

ensureElementContainer

Mostly for internal use. Ensures that the node is of an element container type, mostly helps type validation

Parameters


Returns (ElementContainer \| undefined)

ensureHTMLElement

Mostly for internal use. Ensures that the node is an actual HTML element, mostly helps type validation

Parameters

  • elem T

ensureHTMLElements

Mostly for internal use. Ensures that a list of nodes only contains HTML elements, mostly helps type validation

Parameters

$$

Get an array of HTML elements that matches the specified selector

Parameters

  • selector T
  • context ElementContainer? 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

Parameters

addText

Adds text nodes to the supplied element, persisting newlines by adding br elements for each newline

Parameters

hasClass

Parameters


Returns boolean

removeClass

Parameters

string
Returns void

addClass

Parameters

string
Returns void

toggleClass

Parameters

string
Returns void

appendChild

Helper to append many children nodes at once

Parameters

...Node

setAttributes

Helper to easily set a collection of attributes

Parameters

removeElement

Parameters


Returns void
Meta
  • deprecated: Use element.remove() instead

emptyElement

Iterates over all children in a container and removes them all

Parameters

getDataAttribute

Helper that makes one don't have to do kebab case conversion oneself

Parameters

string Should be in kebab case
Returns (string \| undefined)

setDataAttribute

Helper that makes one don't have to do kebab case conversion oneself

Parameters

string Should be in kebab case
  • value
  • string

    createElement

    Helper to easily create a new HTML element, with all that one would need for that

    Parameters


    Returns HTMLElement

    createChild

    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.

    Parameters


    Returns HTMLElement

    closestByClass

    Iterates over the parents of a node and returns the first one that has the specified class name

    Parameters

    • elem Node
    • className
    string
    Returns (HTMLElement \| undefined)

    elemByClass

    Like $
    , but with class name rather than selector + also matches against the context itself, not just elements within it

    Parameters


    Returns (HTMLElement \| undefined)

    elemsByClass

    Like elemByClass
    but replaces $$ instead and either returns the context itself if it matches, or a list of matching elements within it

    Parameters


    Returns Array<HTMLElement>

    insertBefore

    Parameters

    T
    Returns T