theindividualagency / dom-pouch

A pouch of helper methods for dealing with the DOM

Dom Pouch

Dom Pouch provides a variety of helper methods written in TypeScript for interacting with the DOM and reducing the amount of code needed to perform simple tasks.

Installation

// Yarn
yarn add dom-pouch

// NPM
npm install dom-pouch

Usage

Just import the methods you need

import { findFirst } from 'dom-pouch';

Methods

Selectors

find(selector: stering, context: Document | Element = document): Element[]

Returns an array of all elements which match the selector string.

findFirst(selector: string, context: Document | Element = document): Element

Returns the first element which matches the selector string.

---

Attributes

getAttr(element: Element, attribute: string): string | null

Returns the value of an attribute for the element.

setAttr(element: Element, attribute: string, value: string): void

Sets the value of an attribute for the element.

setDataAttr(element: HTMLElement | SVGElement, attribute: string, value: string): void

Sets the value of a data attribute for the element.

getDataAttr(element: HTMLElement | SVGElement, attribute: string): string | null

Returns the value of a data attribute for the element.

toggleAttrVal(element: Element, attribute: string, valueOne: string, valueTwo: string): void

Toggles an attribute between two values for the element.

---

Events

listen<T extends HTMLElement>(elements: T | T[], events: string | string[], callback: (element: T, event: Event) => void): void

Simple way of binding multiple events to multiple elements. Both elements and events accept either a single item or an array of items. The callback method passes the element as the first argument followed by the event object. By defualt, the passed element in the callback has the type of HTMLElement, but this can be changed by passing a type variable, e.g...

listen<HTMLFormElement>(forms, 'submit', (form, event) => {
    // The form argument is of type HTMLFormElement
});

createEvent(eventName: string): Event

Creates a new event which is compatible with IE11

---

Traversing

removeElement(element: Element): void

Removes an element from the DOM

insertAfter(elementToInsert: Element, referenceElement: Element): void

Inserts an element after the reference element

insertBefore(elementToInsert: Element, referenceElement: Element): void

Inserts an element before the reference element

prependElement(elementToInsert: Element, parentElement: Element): void

Add's an element to the beginning of the parent element

appendElement(elementToInsert: Element, parentElement: Element): void

Add's an element to the end of the parent element