Element Selection

Definition

$<T extends HTMLElement = HTMLElement>(selector: string): ElementWrapper<T>;
$<T extends HTMLElement = HTMLElement>(selector: NodeListOf<T>): ElementWrapper<T>;
$<T extends HTMLElement = HTMLElement>(selector: T): ElementWrapper<T>;
$<T extends HTMLElement = HTMLElement>(selector: T[]): ElementWrapper<T>;

Description

The $() function is the primary entry point for working with the DOM in oBerry. It allows you to select elements using CSS selectors, wrap native DOM nodes, and access the full oBerry chainable API.

Returns a wrapped oBerry element collection with chainable methods for DOM manipulation, traversal, and reactivity.

Examples

CSS Selector

Select elements using standard CSS selectors:

$('.button');
$('#app');
$('div');
$('input[type="text"]');

Single DOM Element

Wrap a native DOM element:

const el = document.getElementById('app');

$(el);

NodeList / HTMLCollection

const items = document.querySelectorAll('.item');

$(items);

Array of Elements

You can also pass arrays of elements:

const nodes = [
  document.getElementById('a'),
  document.getElementById('b'),
];

$(nodes).class.add('active');

Generic Typing (TypeScript)

For better type safety, you can specify element types:

$<HTMLButtonElement>('.btn').on('click', () => {
  console.log('clicked');
});