simpledom
A tiny, simple, strict, typescript-oriented DOM manipulation API.
- Zero dependencies
- Requires ES6 runtime (for
Array.from()
) - Library size: 2,064 bytes minified (877 bytes gzip-compressed)
- Works well with
tsc --strict
Installation
npm install @srhazi/simpledom
Building
- Note: Minified standalone build depends on closure-compiler.
- Version
1.2.0
built with- typescript version: 2.6.2
- node version: 4.1.1
- amdclean version: 2.7.0
- Closure Compiler version: v20200517 (Built on: 2020-05-18 22:36)
git clone https://github.com/sufianrhazi/simpledom.git
cd simpledom
npm install
s/dist
Usage
All functions are named exports with concise names:
import * as dom from '@srhazi/simpledom';
// Typesafe document.querySelector()
let form: HTMLFormElement = dom.one(HTMLFormElement, 'form.login');
// Typesafe document.querySelector()
let maybeForm: HTMLFormElement | undefined = dom.ge(HTMLFormElement, 'form.login');
// Typesafe document.querySelectorAll()
let buttons: HTMLButtonElement[] = dom.all(HTMLButtonElement, 'button.primary');
// Typesafe el.querySelector()
let submit: HTMLButtonElement = dom.oneFrom(form, HTMLButtonElement, 'button.submit');
// Typesafe el.querySelector()
let maybeSubmit: HTMLButtonElement | undefined= dom.oneFrom(form, HTMLButtonElement, 'button.submit');
// Typesafe el.querySelectorAll()
let formCheckboxes: HTMLInputElement[] = dom.allFrom(form, HTMLInputElement, 'input[type="checkbox"]');
// Typesafe jQuery.on-lookalike
dom.on(form, 'keypress', HTMLInputElement, 'input[type="text"][name="dotcom-2.0-name"]', (event, el) => {
// event inferred as KeyboardEvent
// el inferred as HTMLInputElement
if ('aeiou'.indexOf(e.key) !== -1) {
event.preventDefault();
}
});
// String to Element constructor
let container = dom.build(`
<ul>
<li>One</li>
<li>Two</li>
</ul>
`);
document.body.appendChild(container);
// String to DocumentFragment constructor
let moreItems = dom.buildMany(`
<li>Three</li>
<li>Four</li>
`);
container.appendChild(moreItems);