dro

A slim DOM manipulation library written in TypeScript.

Install

npm install --save dro

Quick start

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;
});