Dom.js Core Documentation

Quick Start

Import Dom.js into your frontend project using modern ES module syntax:

import { dom, dm } from './js/HuchiOS/Dom.js';

// Instantiate wrapper around dynamically created HTML
const card = dom('<div class="card"></div>')
  .append('<p data-x-ref="status">Standing By</p>')
  .appendTo('#app');

// Event Delegation & Micro-Reactivity
card.on('click', () => {
  card.patch({ status: 'Updated via .patch()' });
});

Live Sandbox Demo

Click the trigger button below to evaluate state patching via .patch() in real time:

Exhaustive API Reference

Initialization & Factory

Node Unwrapping & Traversal

DOM Manipulation & Structural Modifiers

Attributes, Classes & Styles

Events, Forms & Micro-Reactivity

Production Code Examples

1. Dynamic Form Handling & Ajax Payload Serialization

Capture form submit events, extract plain object payloads, and manage form UI disabled states during async network requests:

import { dom } from './js/HuchiOS/Dom.js';

// Bind submit event handler
dom('#login-form').on('submit', async (e) => {
  e.preventDefault();
  
  const form = dom(e.target);
  
  // Convert inputs directly to key-value object: { email: "...", password: "..." }
  const payload = form.serialize();
  
  // Disable form inputs during processing
  form.find('input, button').attr('disabled', 'disabled');
  
  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    console.log('Server response:', await response.json());
  } finally {
    form.find('input, button').removeAttr('disabled');
  }
});

2. Real-Time Dashboard Updates via .patch()

Target UI nodes tagged with data-x-ref or data-x-key attributes to execute atomic DOM updates with visual pulse feedback:

import { dom } from './js/HuchiOS/Dom.js';

// Select component container holding data-x-ref tags
const metricsWidget = dom('#financial-metrics');

// Handle WebSocket update payload
function onMetricsReceived(data) {
  // Automatically updates content and triggers 'patch-pulse' CSS transition
  metricsWidget.patch({
    revenue: `$${data.revenueTotal}`,
    activeUsers: data.userCount,
    status: data.isLive ? 'Active' : 'Offline'
  });
}

3. Component Context Traversal via .lookup()

Perform deep ancestor traversal to identify parent containers matching specific attributes or tags during event delegation:

import { dom } from './js/HuchiOS/Dom.js';

// Handle delegate clicks across a large data table
dom('#data-table').on('click', (e) => {
  const clicked = dom(e.target);
  
  // Deep-scan parent tree for container holding 'data-item-id' attribute
  const row = clicked.lookup({ 'data-item-id': true });
  
  if (row) {
    const itemId = row.data('item-id');
    console.log(`Action initiated on dataset row #${itemId}`);
  }
});