A slim DOM manipulation libary written in TypeScript.
MIT License
A slim DOM manipulation library written in TypeScript.
npm install --save dro
Basic querying:
import { $, $$ } from 'dro';
const container = $<HTMLElement>(document, '.foo');
const children = $$(document, '.foo a');
Typed query multiple elements at once:
import { $H } from 'dro';
interface MyForm {
username: HTMLInputElement;
password: HTMLInputElement;
submit: HTMLElement;
}
const form = $H<MyForm>(document, {
username: '.my-form input.user',
password: '.my-form input.pass',
submit: '.my-form button[type="submit"]',
});
console.log(form?.username.value);
Create and style an element, then append it to a parent:
import { append, create, html, attrs, style, on } from 'dro';
append(document.body, () => {
const el = create('div');
html(el, 'foo');
attrs(el, {
'class': 'foo',
});
style(el, {
'margin-top': '200px',
});
on(el, 'click', () => console.log('lol!'));
return el;
});