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.

 "code-keyword">import { getElement } "code-keyword">from '@astro-dx/dom';

"code-keyword">const btn = getElement<HTMLButtonElement>('#btn');

btn."code-function">text(label);                     
btn."code-function">attr('disabled', isLoading);     
btn."code-function">cls('active', isActive);         
btn."code-function">on('click', () => { ... });      
btn."code-function">onHover({ enter, leave });       
btn."code-function">onKey('Enter', fn);              
btn."code-function">onFocus({ focus, blur });        
btn."code-function">effect(() => { ... });           
btn."code-function">destroy(); 

getElements()

Returns an array of ElementRefs for all matching elements.

 "code-keyword">import { getElements } "code-keyword">from '@astro-dx/dom';

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

destroyAll()

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

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

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

"code-function">onBeforeSwap(() => {
  "code-function">destroyAll(); 
}); 

Chaining

All methods return this.

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