What to Learn Next

You Have the Foundation

At this point, you understand:

• Why DOM Helpers exists and what problems it addresses
• How the ten modules are organized and what each one is responsible for
• Why modules and sub-modules are kept separate
• The recommended patterns for accessing and updating elements
• How core, enhancers, conditions, storage, and the other modules work together
• What a structured DOM Helpers codebase looks like compared to plain JavaScript

This is the orientation layer. You know the map before exploring the territory.

Now it is time to learn each module in depth, starting from the foundation and working outward.

---

The Recommended Learning Order

Learning in this order ensures that each new concept builds on something you already understand. Skipping ahead is possible, but you may encounter API references to things you have not yet learned.

---

Step 1 — The Core Module

Start here. Everything else in DOM Helpers connects back to the core.

The core introduces the three helpers — Elements, Collections, Selector — and the .update() method that every element carries. Once you understand these, you understand the fundamental pattern that runs through the entire library.

Start with:

• Introduction to DOM Helpers Core — what the core provides and how the three helpers differ
• Elements Helper — ID-based element access, caching, and all Elements methods
• Collections Helper — group access by class, tag, and name; collection methods
• Selector Helper — CSS selector access for complex queries
• The Update Method — all 13 update types, change detection, chaining
• Create Elements — createElement and createElement.bulk() for building DOM programmatically

---

Step 2 — Deep-Dive Access Guides

After the core overview, the access guides cover each helper in exhaustive detail. These are reference-level documentation organized by specific method or pattern.

Elements access:

• Introduction to Elements Access
• Basic ID Usage
• Safe Access Methods — exists(), get(), getRequired()
• Cache Methods
• Batch Access
• Async Waiting — waitFor()
• Property and Attribute Methods

Collections access:

• Introduction to Collections
• Basic Access Methods
• Array-Like Methods — forEach, map, filter, find, reduce
• DOM Manipulation Methods — addClass, setStyle, on, off
• Filtering Methods — visible, hidden, enabled, disabled

Selector access:

• Introduction to Selector
• Basic Query Methods
• Scoped Query Methods
• Async Methods — waitFor, waitForAll

---

Step 3 — The Update Method in Depth

The .update() method is central to how DOM Helpers works. After you understand the core, study the full update method guide to learn every update type and when to use each one.

• What Is Update and Why
• The Update Object Explained
• Update Properties Deep Dive
• Fine-Grained Change Detection

Multi-element updaters:

• What Is Elements.update
• What Is Collections.update
• What Is Selector.update

---

Step 4 — Enhancers

Once you are comfortable with the core, enhancers will feel natural. They all follow the same patterns you already know — they just make common operations shorter.

Learn them in the order that matches how you use the library:

Shortcuts for quicker access:

• Id Shortcut — the Id() function
• Collection Shortcuts — ClassName, TagName, Name
• Global Query — querySelector(), querySelectorAll() (also available as query(), queryAll())

Updaters for more concise updates:

• Bulk Property Updaters — Elements.textContent(), Elements.style(), etc.
• Indexed Collection Updates
• Array-Based Updates

---

Step 5 — Reactive

The reactive module introduces state management with automatic propagation. When state changes, effects re-run, computed values update, and the DOM reflects the new state — all without any manual calls.

Always use the shortcut form — state(), effect(), computed(), watch(), batch(), ref(), refs() — not the ReactiveUtils. prefix.

Start with the overview:

• Reactive (Getting Started) — shortcuts, core functions, and how reactive connects to core, conditions, and storage

Then the full documentation:

• What Is Reactive State
• Reactive Utils Shortcut — the complete shortcut API
• Reactive Guide — full walkthrough from basics to advanced
• Reactive with DOM Helpers Core
• Reactive with Conditions

---

Step 6 — Conditions

After you are fluent in accessing and updating elements, Conditions introduces the next structural level: instead of writing update calls in event handlers, you declare what the DOM should look like for each state.

• What Is Conditions
• WhenState Syntax and Basic Usage
• Condition Matchers
• Property Handlers
• Apply and Watch

---

Step 7 — Storage

StorageUtils can be learned at any point. It does not depend on the core, reactive, or conditions — it is a standalone utility. But understanding it after the core and reactive lets you see immediately how it connects: storage holds persisted state, reactive state holds the live version, and watchers keep them in sync.

• Introduction to StorageUtils
• Save and Load
• Namespaces
• Watch and Cross-Tab Sync
• Auto-Save

---

Step 8 — createElement

createElement and createElement.bulk() are used when you need to build DOM elements from scratch in JavaScript. They are not required for working with existing HTML, but they are essential for dynamic UIs that create elements on demand.

• What Is createElement
• Enhanced createElement
• Bulk Element Creation
• Bulk Result Methods
• Configuration Object

---

Step 9 — Native Enhance

The native-enhance module is ideal if you have an existing project that already uses document.getElementById, document.getElementsByClassName, or querySelector. Load it and those calls automatically return elements with full DOM Helpers power — no refactoring required.

• What Is Native Enhance

---

Step 10 — DOM Form

The DOM Form module (Forms) gives every form a structured API for reading values, validating fields, and submitting data. Learn this when your project involves forms that go beyond a simple one-off submission.

• What Is DOM Form

---

Step 11 — Animation

The animation module extends every element and collection returned by the core with fadeIn, fadeOut, slideUp, slideDown, transform, and a chainable .animate() builder. All animations are promises — you can await them.

• What Is Animation

---

Step 12 — Async

AsyncHelpers covers the async utility patterns that appear in nearly every project: debounce, throttle, fetch with timeout and retry, sleep, parallel execution, and async event handler wrappers.

• What Is AsyncHelpers

---

Step 13 — SPA Router

The SPA Router is the most complete module in the library. It handles client-side navigation, view mounting from <template> elements, animated transitions, declarative links, and navigation guards — all without a page reload.

• What Is SPA Router
• Getting Started with the Router
• Defining Routes
• Navigation
• Route Params and Query
• View Transitions
• Router Links
• Navigation Guards
• Real-World Examples
• API Reference

---

A Note on Learning Pace

There is no requirement to learn everything before you start building. The core module alone — Elements, Collections, Selector, and .update() — is enough to build real, structured pages. Add enhancers when repetition appears. Add reactive when you need state that automatically propagates changes. Add Conditions when state-driven UI mapping gets complex. Add Storage when persistence is needed. Add DOM Form, Animation, Async, and the Router as your project's requirements grow.

The library is layered intentionally so you can adopt it at your own pace without hitting walls.

---

Begin Here

If you have not started yet, the first place to go is the core module introduction:

• What Is DOM Helpers Core