Introduction / Getting Started
$a('#menu>div').onClick(n => n.addClass('clicked'));// Assume .sign-up-section contains radio inputs named 'interest'
const section = $1('.sign-up-section');
$1('>button', section).onClick(() => {
const o = $v(section);
if (!o.interests.includes('clean code')) {
$1('.error', section)
.setHtml(`${o.name}, select "clean code" to continue`)
.addClass('on');
}
});Intuitive DOM Toolkit
Comprehensive API with single-instance objects per element – eliminating duplication and boosting performance for element selection, manipulation, traversal, event handling and more.
Lightweight
Only 3.8KB gzipped – adds minimal overhead.
Modern JavaScript
Built with ES2022, empowers clean and maintainable code, compatible with all modern browsers.
Powerful Cleanup
State (event listeners, data, etc.) automatically removed when elements are destroyed. Leak-proof by design, no need for manual cleanup to avoid memory leaks.
Stack Agnostic
Set events with InDom, remove elements with any library (an older JS DOM library, a large JS framework, etc.) – cleanup still happens automatically. This allows gradual adoption of InDom at any pace.
Fast & Dependency-Free
Optimized for performance with zero external dependencies.
Auto-Typed Field IO
One-line get / set for any input—checkbox arrays, multi-select, files, radios etc. No need for manual branching.
Smart Value Harvester
Turns any container into a plain object of field values—single call, auto-typed, with dynamic-name grouping and zero config.
Three Distribution Formats
Plain JavaScript, ES modules, and TypeScript.
First-class TypeScript
ES2022-compatible type definitions included in /dist, source code in /src
Download:
Distribution FormatFileDescriptionjsDelivrunpkg
Install:
npm install indomNote:
You can find more information about InDom usage for your specific distribution format in 'Usage Info': Plain JavaScript, ES Modules, TypeScript
Shortcuts:
The convenience shortcuts ($1, $a, $id, $n, $v) are optional and can be renamed, scoped differently, or omitted entirely according to your preference. In the ES Modules and TypeScript distribution formats, you can simply choose not to import them, or import them under different names.
Next: Getting Started »