The Modern Web Deserves a Native DOM Utility — Enter OptiDOM

jQuery has long stood as a giant of web development — celebrated for its easy-to-use selectors, intuitive element manipulation, and extensive cross-browser compatibility. It helped define the early era of dynamic web development and was the go-to tool for nearly every frontend developer.

But times have changed…

Over time, the web has evolved — and now native JavaScript provides nearly everything jQuery once did, often in more efficient and modular ways. Still, there’s a gap: writing clean, concise, and chainable DOM code without repetitive boilerplate or manual prototype patching.

And that’s where OptiDOM comes in.

Why OptiDOM?

• Tiny, Chainable DOM Utilities: Built on native objects.
• HTML Builders: Structured element creation with ease.
• CSS, Text, and EventListener Support: For elements and NodeLists.
• Strong TypeScript Support: Enhanced typing for better development experience.
• Global Shortcut Binding: Easy-to-use keyboard shortcuts.
• LocalStorage and Cookie APIs: Cleaner and more efficient storage interaction.
• No Wrapper Library: Just one import is all you need.

A Native-First Alternative to jQuery

Unlike jQuery, which requires importing a separate library and works outside the native ecosystem, OptiDOM augments and enhances the built-in JavaScript objects you already use. It introduces compact utilities like document.$() and the sister selector, document.$$() for quick queries, and brings modern, chainable methods to native elements — no wrappers needed.

Create HTML Cascades with Ease

Have you ever faced the challenge of building HTML with lengthy chains of element definitions and appends? The new HTMLElementCreator class helps with that! It provides features that assist in creating and structuring cascades of HTML, all in JavaScript. Using the elementCreator method on document and HTMLElement, you can instantiate the class and start creating reliable cascades of HTML.

Familiar Utilities — But Native

For developers using jQuery primarily for CSS and text manipulation, OptiDOM adds equivalent methods such as:

const element = document.$("#target");

element.text("Hello")
element.css({ color: "red", fontSize: "16px" })

And the document object even gets its own css() method so you can style multiple elements at once — without inline styles and their limitations.

But there’s more.

DOM Event Handling — Upgraded

OptiDOM enhances event handling and global state management with several powerful utilities:

• addEventListener: Now supports NodeList objects, allowing developers to easily add event listeners to multiple elements at once.
• addOnceListener: A method for adding event listeners that will trigger only once per element, giving you more control over event-driven code.
• Keyboard Shortcuts: The bindShortcut() function makes global and document-level keyboard shortcut handling a breeze, allowing developers to define shortcut combinations using declarative strings like 'ctrl+shift+s'.

Additional Everyday Objects

OptiDOM doesn’t just simplify working with the DOM — it also fills important gaps in everyday JavaScript development:

• LocalStorage, SessionStorage, and Cookie classes: Available on objects like document, window, and globalThis, these new classes provide intuitive setter and getter methods for interacting with local storage and cookies in a cleaner, more efficient way.
• Time class: OptiDOM’s Time class offers a lightweight, focused way to work with time values, using only hours, minutes, seconds, and milliseconds. It’s perfect for creating timers, clocks, or simple countdowns without the complexity and overhead of JavaScript’s full Date object. Need a Date anyway? You can convert a Time instance into a native Date whenever necessary.
• Sequence class: The Sequence class simplifies managing sets of functions that need to run in order — whether synchronously or asynchronously. It's ideal for handling step-by-step user flows, orchestrating animations, or chaining API calls, reducing the need for deeply nested callbacks or overcomplicated promise chains — without needing to nest any .then() calls.

Globally Available Type Checkers

OptiDOM also provides a set of global utility functions for type checking and validation, making it easier to write safe, predictable code without relying on repetitive manual checks.

• isEmpty(value): Checks whether a value is “empty” or inaccessible. For example, an empty string (""), an empty array, null, or undefined would all be considered empty, allowing you to guard against missing or invalid data more easily.
• type(value): Returns the lowercase string form of the value’s type, such as "string", "number", "object", "array", "function", etc. This improves both readability and accuracy compared to traditional typeof and instanceof checks.

Built-In TypeScript Support

For TypeScript developers, OptiDOM adds strong typing to native methods like JSON.parse, helping you avoid the common typing pitfalls and ensuring type safety at every turn.

Getting Started

To include OptiDOM in your project, simply import it:

import 'optidom';

And then you’re done!

Still Growing

OptiDOM is a living utility — and we’re just getting started. As more real-world use cases surface, we’ll keep evolving and expanding it. The community can contribute as the project grows. Whether you’re modernizing a legacy codebase or building from scratch, OptiDOM brings clarity and power to your DOM interactions — without leaving native JavaScript behind.

Give it a try — your future self (and your DOM) will thank you.

Find it on GitHub
OptiDOM GitHub (2.3.0)