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.
// Yarn
yarn add dom-pouch
// NPM
npm install dom-pouch
Just import the methods you need
import { findFirst } from 'dom-pouch';
Returns an array of all elements which match the selector string.
Returns the first element which matches the selector string.
Returns the value of an attribute for the element.
Sets the value of an attribute for the element.
Sets the value of a data attribute for the element.
Returns the value of a data attribute for the element.
Toggles an attribute between two values for the element.
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
});
Creates a new event which is compatible with IE11
Removes an element from the DOM
Inserts an element after the reference element
Inserts an element before the reference element
Add's an element to the beginning of the parent element
Add's an element to the end of the parent element