Nostalgic Perogi Monogramming

    @hdsydsvenskan/dom-utils
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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

    Returns void

    addClass

    Parameters

    Returns void

    toggleClass

    Parameters

    Returns void

    appendChild

    Helper to append many children nodes at once

    Parameters

    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

    Returns (string | undefined)

    setDataAttribute

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

    Parameters

    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

    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

    Returns T

    Keywords

    none

    Install

    npm i @hdsydsvenskan/dom-utils

    DownloadsWeekly Downloads

    200

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    23.8 kB

    Total Files

    9

    Last publish

    Collaborators

    • takolander
    • andreas.samuelsson
    • bonniererikrosberg
    • vitryssen
    • johngustav
    • rickardk_
    • herbola
    • ninhow
    • morre
    • maria.rudolphi
    • coulrophobiac
    • tobiasharle
    • j0n
    • emilbjorklund
    • nifo
    • mikael.mattsson
    • jonaek
    • linusthiel-bn
    • lofsan
    • khof-bn
    • johangrahn
    • jon.eldeklint
    • emil.samuelsson
    • pleid