Docs · @astro-dx/dom

@astro-dx/dom

Typed, chainable element references. Also re-exports everything from @astro-dx/events and @astro-dx/attributes.

getElement()

Returns an ElementRef for a single element. Returns a no-op ref (not null) if not found — no null checks needed.

typescript

import { getElement } from '@astro-dx/dom';

const btn = getElement<HTMLButtonElement>('#btn');

btn.text(label);                     // reactive textContent
btn.attr('disabled', isLoading);     // reactive attribute
btn.cls('active', isActive);         // reactive class toggle
btn.on('click', () => { ... });      // event listener
btn.onHover({ enter, leave });       // mouseenter + mouseleave
btn.onKey('Enter', fn);              // keydown with key filter
btn.onFocus({ focus, blur });        // focus + blur
btn.effect(() => { ... });           // reactive effect
btn.destroy();                       // remove all listeners + subscriptions

getElements()

Returns an array of ElementRefs for all matching elements.

typescript

import { getElements } from '@astro-dx/dom';

const items = getElements<HTMLLIElement>('.item');
for (const item of items) {
  item.on('click', () => select(item.el.dataset.id!));
}

destroyAll()

Destroys all ElementRef instances created since last cleanup. Call in onBeforeSwap to prevent listener stacking across navigations.

typescript

import { onPageLoad, onBeforeSwap } from '@astro-dx/core';
import { getElement, destroyAll } from '@astro-dx/dom';

onPageLoad(() => {
  getElement('#btn').on('click', doSomething);
});

onBeforeSwap(() => {
  destroyAll(); // cleans everything set up in onPageLoad
});

Chaining

All methods return this.

typescript

getElement('#btn')
  .text(label)
  .attr('disabled', isLoading)
  .cls('active', isActive)
  .on('click', handleClick);