Class DOMUtils

Constructors

constructor

new DOMUtils(): DOMUtils
Returns DOMUtils

Methods

`Static`addClass

addClass(element: null | HTMLElement, className: ClassNameInput): void
Add CSS class to element
Parameters
- element: null | HTMLElement
  Target element
- className: ClassNameInput
  Class name(s) to add
Returns void
- Defined in utils/dom-utils.ts:122

`Static`animate

animate(
    element: null | HTMLElement,
    properties: StylesObject,
    duration?: number,
    easing?: string,
): Promise<void>
Animate element using CSS transitions
Parameters
- element: null | HTMLElement
  Target element
- properties: StylesObject
  CSS properties to animate
- duration: number = 300
  Animation duration in milliseconds
- easing: string = 'ease'
  Easing function
Returns Promise<void>
Promise that resolves when animation completes
- Defined in utils/dom-utils.ts:437

`Static`attr

attr(element: null | HTMLElement, name: string, value: AttributeValue): void
Get or set element attributes
Parameters
- element: null | HTMLElement
  Target element
- name: string
  Attribute name or attributes object
- value: AttributeValue
  Attribute value (when name is string)
Returns void
Attribute value (when getting)
- Defined in utils/dom-utils.ts:376
attr(element: null | HTMLElement, name: AttributesObject): void
Get or set element attributes
Parameters
- element: null | HTMLElement
  Target element
- name: AttributesObject
  Attribute name or attributes object
Returns void
Attribute value (when getting)
- Defined in utils/dom-utils.ts:377
attr(element: null | HTMLElement, name: string): null | string
Get or set element attributes
Parameters
- element: null | HTMLElement
  Target element
- name: string
  Attribute name or attributes object
Returns null | string
Attribute value (when getting)
- Defined in utils/dom-utils.ts:378

`Static`closest

closest(element: null | HTMLElement, selector: string): null | HTMLElement
Find closest ancestor element matching selector
Parameters
- element: null | HTMLElement
  Starting element
- selector: string
  CSS selector
Returns null | HTMLElement
Matching ancestor element
- Defined in utils/dom-utils.ts:251

`Static`createElement

createElement(
    tagName: string,
    attributes?: AttributesObject & {
        class?: string;
        className?: string;
        style?: StylesObject;
    },
    content?: null | ElementContent,
): HTMLElement
Create DOM element with attributes and content
Parameters
- tagName: string
  HTML tag name
- attributes: AttributesObject & { class?: string; className?: string; style?: StylesObject } = {}
  Element attributes
- content: null | ElementContent = null
  Element content
Returns HTMLElement
Created element
- Defined in utils/dom-utils.ts:76

`Static`data

data(element: null | HTMLElement, key: string, value: DataValue): void
Get or set element data attributes
Parameters
- element: null | HTMLElement
  Target element
- key: string
  Data key
- value: DataValue
  Data value (when setting)
Returns void
Data value (when getting)
- Defined in utils/dom-utils.ts:417
data(element: null | HTMLElement, key: string): undefined | string
Get or set element data attributes
Parameters
- element: null | HTMLElement
  Target element
- key: string
  Data key
Returns undefined | string
Data value (when getting)
- Defined in utils/dom-utils.ts:418

`Static`delegate

delegate(
    parent: null | HTMLElement,
    selector: string,
    eventType: string,
    handler: (this: HTMLElement, event: Event) => void,
): void
Delegate event to selector inside a parent element
Parameters
- parent: null | HTMLElement
  Parent element
- selector: string
  Target selector
- eventType: string
  Event type
- handler: (this: HTMLElement, event: Event) => void
  Event handler
Returns void
- Defined in utils/dom-utils.ts:587

`Static`empty

empty(element: null | HTMLElement): void
Empty element's content
Parameters
- element: null | HTMLElement
  Element to empty
Returns void
- Defined in utils/dom-utils.ts:351

`Static`fadeIn

fadeIn(element: null | HTMLElement, duration?: number): Promise<void>
Fade in element
Parameters
- element: null | HTMLElement
  Target element
- duration: number = 300
  Animation duration in milliseconds
Returns Promise<void>
Promise that resolves when animation completes
- Defined in utils/dom-utils.ts:474

`Static`fadeOut

fadeOut(element: null | HTMLElement, duration?: number): Promise<void>
Fade out element
Parameters
- element: null | HTMLElement
  Target element
- duration: number = 300
  Animation duration in milliseconds
Returns Promise<void>
Promise that resolves when animation completes
- Defined in utils/dom-utils.ts:489

`Static`getElement

getElement(element: ElementInput | JQueryLike): null | HTMLElement
Get DOM element from selector or element
Parameters
- element: ElementInput | JQueryLike
  Element or selector
Returns null | HTMLElement
DOM element or null
- Defined in utils/dom-utils.ts:40

`Static`getElements

getElements(
selector: string,
context?: HTMLElement | Document,
): NodeListOf<Element>
Get all matching DOM elements
Parameters
- selector: string
  CSS selector
- context: HTMLElement | Document = document
  Context element (default: document)
Returns NodeListOf<Element>
List of matching elements
- Defined in utils/dom-utils.ts:65

`Static`getNextSibling

getNextSibling(
element: null | HTMLElement,
selector?: null | string,
): null | HTMLElement
Get next sibling element
Parameters
- element: null | HTMLElement
  Target element
- selector: null | string = null
  Optional selector to match
Returns null | HTMLElement
Next sibling element
- Defined in utils/dom-utils.ts:280

`Static`getOffset

getOffset(element: null | HTMLElement): PositionInfo
Get element's offset position
Parameters
- element: null | HTMLElement
  Target element
Returns PositionInfo
Position object with top, left, width, height
- Defined in utils/dom-utils.ts:196

`Static`getPosition

getPosition(element: null | HTMLElement): PositionInfo
Get element's position relative to viewport
Parameters
- element: null | HTMLElement
  Target element
Returns PositionInfo
Position object with top, left, width, height
- Defined in utils/dom-utils.ts:216

`Static`getPreviousSibling

getPreviousSibling(
element: null | HTMLElement,
selector?: null | string,
): null | HTMLElement
Get previous sibling element
Parameters
- element: null | HTMLElement
  Target element
- selector: null | string = null
  Optional selector to match
Returns null | HTMLElement
Previous sibling element
- Defined in utils/dom-utils.ts:299

`Static`getSiblings

getSiblings(
element: null | HTMLElement,
selector?: null | string,
): HTMLElement[]
Get all siblings of an element
Parameters
- element: null | HTMLElement
  Target element
- selector: null | string = null
  Optional selector to filter siblings
Returns HTMLElement[]
Array of sibling elements
- Defined in utils/dom-utils.ts:262

`Static`getStyle

getStyle(element: null | HTMLElement, property: string): string
Get element's computed style property
Parameters
- element: null | HTMLElement
  Target element
- property: string
  CSS property name
Returns string
Computed style value
- Defined in utils/dom-utils.ts:176

`Static`hasClass

hasClass(element: null | HTMLElement, className: string): boolean
Check if element has CSS class
Parameters
- element: null | HTMLElement
  Target element
- className: string
  Class name to check
Returns boolean
True if element has class
- Defined in utils/dom-utils.ts:165

`Static`insertAfter

insertAfter(newElement: HTMLElement, targetElement: HTMLElement): void
Insert element after target element
Parameters
- newElement: HTMLElement
  Element to insert
- targetElement: HTMLElement
  Target element
Returns void
- Defined in utils/dom-utils.ts:317

`Static`insertBefore

insertBefore(newElement: HTMLElement, targetElement: HTMLElement): void
Insert element before target element
Parameters
- newElement: HTMLElement
  Element to insert
- targetElement: HTMLElement
  Target element
Returns void
- Defined in utils/dom-utils.ts:332

`Static`isInViewport

isInViewport(element: null | HTMLElement): boolean
Check if element is visible in viewport
Parameters
- element: null | HTMLElement
  Target element
Returns boolean
True if element is visible
- Defined in utils/dom-utils.ts:233

`Static`matches

matches(element: null | HTMLElement, selector: string): boolean
Check if element matches selector
Parameters
- element: null | HTMLElement
  Element to check
- selector: string
  CSS selector
Returns boolean
True if element matches selector
- Defined in utils/dom-utils.ts:364

`Static`observeResize

observeResize(
    element: null | HTMLElement,
    callback: (entries: ResizeObserverEntry[]) => void,
    delay?: number,
): null | ResizeObserver
Debounced resize observer
Parameters
- element: null | HTMLElement
  Element to observe
- callback: (entries: ResizeObserverEntry[]) => void
  Callback function
- delay: number = 100
  Debounce delay
Returns null | ResizeObserver
ResizeObserver instance
- Defined in utils/dom-utils.ts:561

`Static`off

off(element: null | HTMLElement, event: string, handler: EventListener): void
Remove event listener
Parameters
- element: null | HTMLElement
  Target element
- event: string
  Event type
- handler: EventListener
  Event handler
Returns void
- Defined in utils/dom-utils.ts:625

`Static`on

on(element: null | HTMLElement, event: string, handler: EventListener): void
Add event listener
Parameters
- element: null | HTMLElement
  Target element
- event: string
  Event type
- handler: EventListener
  Event handler
Returns void
- Defined in utils/dom-utils.ts:609

`Static`remove

remove(element: null | HTMLElement): void
Remove element from DOM
Parameters
- element: null | HTMLElement
  Element to remove
Returns void
- Defined in utils/dom-utils.ts:341

`Static`removeAttr

removeAttr(element: null | HTMLElement, name: string): void
Remove attribute from element
Parameters
- element: null | HTMLElement
  Target element
- name: string
  Attribute name
Returns void
- Defined in utils/dom-utils.ts:404

`Static`removeClass

removeClass(element: null | HTMLElement, className: ClassNameInput): void
Remove CSS class from element
Parameters
- element: null | HTMLElement
  Target element
- className: ClassNameInput
  Class name(s) to remove
Returns void
- Defined in utils/dom-utils.ts:137

`Static`scrollIntoView

scrollIntoView(element: null | HTMLElement, options?: ScrollOptions): void
Scroll element into view
Parameters
- element: null | HTMLElement
  Target element
- options: ScrollOptions = {}
  Scroll options
Returns void
- Defined in utils/dom-utils.ts:542

`Static`setContent

setContent(element: HTMLElement, content: ElementContent): void
Set element content
Parameters
- element: HTMLElement
  Target element
- content: ElementContent
  Content to set
Returns void
- Defined in utils/dom-utils.ts:107

`Static`setStyle

setStyle(element: null | HTMLElement, styles: StylesObject): void
Set element's style properties
Parameters
- element: null | HTMLElement
  Target element
- styles: StylesObject
  Style properties object
Returns void
- Defined in utils/dom-utils.ts:186

`Static`slideDown

slideDown(element: null | HTMLElement, duration?: number): Promise<void>
Slide down element
Parameters
- element: null | HTMLElement
  Target element
- duration: number = 300
  Animation duration in milliseconds
Returns Promise<void>
Promise that resolves when animation completes
- Defined in utils/dom-utils.ts:503

`Static`slideUp

slideUp(element: null | HTMLElement, duration?: number): Promise<void>
Slide up element
Parameters
- element: null | HTMLElement
  Target element
- duration: number = 300
  Animation duration in milliseconds
Returns Promise<void>
Promise that resolves when animation completes
- Defined in utils/dom-utils.ts:523

`Static`toggleClass

toggleClass(
    element: null | HTMLElement,
    className: string,
    force?: boolean,
): boolean
Toggle CSS class on element
Parameters
- element: null | HTMLElement
  Target element
- className: string
  Class name to toggle
- Optionalforce: boolean
  Force add/remove
Returns boolean
True if class is present after toggle
- Defined in utils/dom-utils.ts:154

`Static`toggleVisibility

toggleVisibility(element: null | HTMLElement, show: boolean): void
Toggle visibility of an element
Parameters
- element: null | HTMLElement
  Target element
- show: boolean
  Show if true, hide if false
Returns void
- Defined in utils/dom-utils.ts:640

Class DOMUtils

Index

Constructors

Methods

Constructors

constructor

Returns DOMUtils

Methods

StaticaddClass

Parameters

Returns void

Staticanimate

Parameters

Returns Promise<void>

Staticattr

Parameters

Returns void

Parameters

Returns void

Parameters

Returns null | string

Staticclosest

Parameters

Returns null | HTMLElement

StaticcreateElement

Parameters

Returns HTMLElement

Staticdata

Parameters

Returns void

Parameters

Returns undefined | string

Staticdelegate

Parameters

Returns void

Staticempty

Parameters

Returns void

StaticfadeIn

Parameters

Returns Promise<void>

StaticfadeOut

Parameters

Returns Promise<void>

StaticgetElement

Parameters

Returns null | HTMLElement

StaticgetElements

Parameters

Returns NodeListOf<Element>

StaticgetNextSibling

Parameters

Returns null | HTMLElement

StaticgetOffset

Parameters

Returns PositionInfo

StaticgetPosition

Parameters

Returns PositionInfo

StaticgetPreviousSibling

Parameters

Returns null | HTMLElement

StaticgetSiblings

Parameters

Returns HTMLElement[]

StaticgetStyle

Parameters

Returns string

StatichasClass

Parameters

Returns boolean

StaticinsertAfter

Parameters

Returns void

StaticinsertBefore

Parameters

Returns void

StaticisInViewport

Parameters

Returns boolean

`Static`addClass

`Static`animate

`Static`attr

`Static`closest

`Static`createElement

`Static`data

`Static`delegate

`Static`empty

`Static`fadeIn

`Static`fadeOut

`Static`getElement

`Static`getElements

`Static`getNextSibling

`Static`getOffset

`Static`getPosition

`Static`getPreviousSibling

`Static`getSiblings

`Static`getStyle

`Static`hasClass

`Static`insertAfter

`Static`insertBefore

`Static`isInViewport

`Static`matches

`Static`observeResize

`Static`off

`Static`on

`Static`remove

`Static`removeAttr

`Static`removeClass

`Static`scrollIntoView

`Static`setContent

`Static`setStyle

`Static`slideDown

`Static`slideUp

`Static`toggleClass

`Static`toggleVisibility