DOM Plugin

Home/DOM Plugin

Setup

Link the compiled script after the ArchCSS stylesheet and before your own code. The helpers are plain script-scope functions, so no build step or bundler is required.

<script src="node_modules/archcss/dist/js/plugin.js"></script>

Globals (`$_`)

$_('key') reads a document, browser or location value. $_('key', value) writes to the values that support it (title and location parts).

Key	Returns / sets
`title`	Document title (get and set)
`charset`, `baseURI`, `readyState`	Document metadata
`links`, `scripts`, `embeds`, `images`	Document collections (HTMLCollection)
`cookies`, `language`, `online`, `userAgent`	Browser capabilities
`host`, `hostname`, `href`, `url`, `pathname`, `port`, `protocol`, `search`	Location values (get and set)
`history`	`-1` or `'back'` go back, `+1` or `'forward'` go forward, otherwise reload
`update`	Last modification date of the document
`https`	`true` when the page is served over HTTPS
`author-org`, `author-name`, `author-right`, `author-email`, `author-site`, `copyright`, `owner`, `version`	Framework and author metadata

$_('title');               // reads the current title
$_('title', 'My page');    // sets a new title
$_('https');               // true when served over https
$_('history', -1);         // go back one step

Date (`date`)

date(format, type) formats the current date and time. Pass 'En' as type for 12-hour time or English names, 'Fr' for 24-hour time or French names. Called without a known format it returns the localized full date and time.

Format	Output
`H`	Hour, 24-hour, 12-hour with type `En`
`H:i`, `H:i:s`	Time without and with seconds
`i`, `s`, `ms`, `t`	Minutes, seconds, milliseconds, timezone offset
`Y`, `m`, `d`, `f`	Year, month (1-12), day of month, weekday index
`DD/MM/YY`, `MM/DD/YY`, `DD-MM-YY`, `MM-DD-YY`	Numeric date with year
`DD/MM`, `MM/DD`, `DD-MM`, `MM-DD`	Numeric date without year
`En`, `Fr`	Full localized date

date('H');              // 14
date('H:i:s', 'En');    // 2:05:09
date('DD/MM/YY');       // 30/08/2026
date('En');             // Sunday, August 30, 2026

Selectors

Three helpers resolve elements from CSS selectors, tag names and ids.

Function	Description
`select(el, all)`	First match, or all matches when `all` is true
`select_tag(el)`	Live HTMLCollection by tag name
`select_id(el)`	Single element by id

select('.menu-item');            // first element with this class
select('.menu-item', true);      // all elements with this class
select_tag('button');            // all buttons on the page
select_id('menu');               // single element by id

Content

Create elements and read or replace their content.

Function	Description
`create(el)`	Create a new element by tag name
`echo(text, el, all)`	Replace the HTML of one or many elements; logs to console when no element is given
`get_innerHTML(el)`	Read element HTML
`get_innerTEXT(el)`, `set_innerTEXT(el, text)`	Get or replace element text

const badge = create('span');        // new span element
echo('Hello', '.alert');             // replaces the first .alert content
echo('Saved', '.toast', true);       // replaces every .toast content
set_innerTEXT('#status', 'Ready');   // sets the text of an element

Attributes

Read and write element attributes and toggle classes.

attrib('.avatar', 'alt', 'User');    // sets an attribute
attrib('.avatar', 'alt');            // returns its value
attrib('.menu', 'aria-expanded', 'false');
classlist('#menu', ['open', 'js-focus']);

Visibility

display(el, value) shows and hides an element using an inline display value (block by default), toggling between the value and none. hide(el) always forces the element hidden.

display('.panel');             // toggle between block and none
display('.panel', 'flex');     // toggle between flex and none
hide('.panel');                // force the element hidden

Remove

drop(el) removes the first match, drop_all(list) removes several selectors. Missing elements are safely ignored.

drop('.toast');                     // removes the first .toast
drop_all(['.toast', '.modal']);     // removes both

Events

Function	Description
`on(event, listener)`	Document-level listener
`onClick(id, fn)`	Click handler on an element by id
`onDblClick(id, fn)`	Double-click handler on an element by id
`on_scroll(el, add, remove, offset)`	Swaps class lists once the page scrolled past an offset
`scroll_to(el, offset)`	Smoothly scrolls to an element by id, minus an optional pixel offset (fixed headers and bars)

on_scroll() is a state check, not a listener, so bind it yourself.

on('scroll', () => on_scroll('#nav', ['nav--dark'], [], 20));

onClick('menu-btn', () => {
  console.log('menu opened');
});

scroll_to('footer', 60);

Miscellaneous

Function	Description
`isset(key)`	True for any value that is not null, false, undefined or empty
`goto(location)`	Redirects the page to the given location
`strcopy(text)`	Copies a text or, when the argument matches an element, that element's text content to the clipboard
`HttpRequest()`	Returns an XMLHttpRequest instance

isset('');        // false
isset('ArchCSS');  // true

strcopy('https://archcss.com');   // copies the given text
strcopy('.toast');                // copies the text content of the first .toast element

Pop-up (`popUp`)

popUp(options) creates a floating window with a title bar, optional favicon, content and built-in actions. Double-click the move handle to start or stop dragging, the cross button closes the window, and an overlay can be enabled underneath. Creating a window whose id already exists pulses the existing one instead.

Option	Default	Description
`title`	`''`	Window title, also used as the window id
`favicon`	`''`	Image url shown next to the title
`content`	`''`	Plain text view
`html`	`''`	HTML view
`href`	`''`	Iframe view loading the given url
`titlebar`	`true`	Show the title bar
`rounded`, `shadow`, `border`	`true`	Visual switches
`classlist`	`[]`	Extra classes to add to the window
`style`	`'light'`	`'dark'`, `'light'` or `'none'`
`overlay`	`false`	Add a blurred backdrop under the window
`height`, `width`	`''`	Window size (any CSS value)
`top`, `right`, `bottom`, `left`	`''`	Window position; centered when none is given
`index`	`8`	Z-index priority
`timeout`	`0`	Auto-close delay in ms (0 disables it)

popUp({
  title: 'Welcome',
  favicon: 'assets/logo/logo.png',
  content: 'Thanks for visiting ArchCSS.',
  style: 'dark',
  overlay: true,
  timeout: 5000
});

Cookies

Set a cookie with an optional expiry date, or delete one.

set_cookie('theme', 'dark', 'Thu, 01 Jan 2027 00:00:00 UTC');
unset_cookie('theme');