March Docs

Dom

Dom — browser DOM bindings for March compiled with --target js.

Provides typed wrappers over the browser's Document Object Model. Requires --target js; calling these functions from a native build panics.

Usage: match Dom.find("counter") do None -> () Some(el) -> Dom.set_text(el, "0") Dom.on(el, "click", fn _ -> Dom.set_text(el, "clicked!")) end

Note: set_timeout/set_interval/on_frame take a zero-arg callback typed Unit -> Unit — pass a 0-arg lambda fn -> .... (The typechecker accepts fn -> body against a Unit -> Unit parameter, treating it as a unit-consuming thunk.)

Functions

fnadd_classadd_class(el, cls) do dom_class_add(el, cls) end#

Add CSS class cls to el's classList. No-op if already present.

fnalertalert(msg) do dom_alert(msg) end#

Show a blocking browser alert() dialog with msg.

fnappendappend(parent, child) do dom_append_child(parent, child) end#

Append child as the last child of parent. If child is already in the tree it is moved.

fnbodybody() do dom_body() end#

The document <body> element.

fnchildrenchildren(el) do dom_children(el) end#

Return a List(Node) of the direct element children of el (text nodes excluded).

fnclearclear(el) do dom_clear_children(el) end#

Remove all child nodes from el, leaving it empty.

fncloneclone(el) do dom_clone(el) end#

Return a deep clone of el (all descendants included), detached from the tree.

fncreatecreate(tag) do dom_create_element(tag) end#

Create a new element with the given HTML tag name (e.g. \

fnevent_keyevent_key(ev) do dom_event_key(ev) end#

Return the key that triggered a `\

fnevent_targetevent_target(ev) do dom_event_target(ev) end#

Return the element that triggered ev (the event.target node).

fnevent_typeevent_type(ev) do dom_event_type(ev) end#

Return the event type string for ev (e.g. \

fnevent_xevent_x(ev) do dom_event_x(ev) end#

Return the x-coordinate of ev relative to the target element (event.offsetX). Useful for hit-testing pointer/click events against a <canvas>.

fnevent_yevent_y(ev) do dom_event_y(ev) end#

Return the y-coordinate of ev relative to the target element (event.offsetY).

fnfindfind(id) do dom_get_element_by_id(id) end#

Look up an element by its id attribute. Returns None if no element with that id exists.

fnfirst_childfirst_child(el) do dom_first_child(el) end#

Return the first element child of el, or None if el has no element children.

fnget_attrget_attr(el, name) do dom_get_attribute(el, name) end#

Return the value of the named attribute, or None if the attribute is absent.

fnget_htmlget_html(el) do dom_get_html(el) end#

Return the innerHTML of el as a string.

fnget_styleget_style(el, prop) do dom_get_style(el, prop) end#

Return the inline CSS value for prop on el. Returns an empty string if the property is not set inline.

fnget_textget_text(el) do dom_get_text(el) end#

Return the textContent of el (all descendant text, concatenated).

fnget_valueget_value(el) do dom_get_value(el) end#

Return the current value property of a form input, textarea, or select element.

fnhas_attrhas_attr(el, name) do dom_has_attribute(el, name) end#

Return true if el has the named attribute, false otherwise.

fnhas_classhas_class(el, cls) do dom_class_contains(el, cls) end#

Return true if el's classList contains cls.

fnhrefhref() do dom_href() end#

Return the current page URL (window.location.href).

fnkey_presseskey_presses() do dom_key_presses() end#

Drain and return the keyboard keys (keydown event.key strings, e.g. \

fnlast_childlast_child(el) do dom_last_child(el) end#

Return the last element child of el, or None if el has no element children.

fnlistenlisten(el, event, handler) do dom_add_event_listener(el, event, handler) end#

Attach handler to el for DOM event event (e.g. \

fnnavigatenavigate(url) do dom_set_href(url) end#

Navigate to url by setting window.location.href. This replaces the current page.

fnon_frameon_frame(cb) do dom_request_animation_frame(cb) end#

Schedule cb to run before the next browser repaint (requestAnimationFrame). Use for smooth 60 fps animations. cb is a zero-arg callback — pass fn -> ....

fnparentparent(el) do dom_parent(el) end#

Return the direct parent element of el, or None if el is the root or detached.

fnpointer_pospointer_pos(el) do dom_pointer_pos(el) end#

The live cursor position over el as element-relative (x, y) integers, updated by a mousemove listener installed on the first call. Defaults to el's center before any movement. Unlike taps, this reads the current position rather than draining a buffer.

fnprependprepend(parent, child) do dom_prepend_child(parent, child) end#

Insert child before all existing children of parent. If child is already in the tree it is moved.

fnprevent_defaultprevent_default(ev) do dom_prevent_default(ev) end#

Prevent the browser's default action for ev (e.g. stop a link from navigating, a form from submitting).

fnremoveremove(el) do dom_remove(el) end#

Detach el from its parent and remove it from the DOM. No-op if el has no parent.

fnremove_attrremove_attr(el, name) do dom_remove_attribute(el, name) end#

Remove the named attribute from el. No-op if the attribute is absent.

fnremove_childremove_child(parent, child) do dom_remove_child(parent, child) end#

Remove child from parent. Panics if child is not a direct child of parent; prefer remove when the parent is unknown.

fnremove_classremove_class(el, cls) do dom_class_remove(el, cls) end#

Remove CSS class cls from el's classList. No-op if absent.

fnselectselect(selector) do dom_query_selector(selector) end#

Find the first element matching a CSS selector string (e.g. \

fnselect_allselect_all(selector) do dom_query_selector_all(selector) end#

Find all elements matching a CSS selector. Returns a List(Node), empty when nothing matches.

fnset_attrset_attr(el, name, val) do dom_set_attribute(el, name, val) end#

Set the value of the named attribute on el (e.g. `set_attr(el, \

fnset_htmlset_html(el, html) do dom_set_html(el, html) end#

Set the innerHTML of el. The string is parsed as HTML; use set_text when the content is plain text.

fnset_intervalset_interval(ms, cb) do dom_set_interval(ms, cb) end#

Call cb repeatedly every ms milliseconds. Equivalent to setInterval. Returns no handle — cancel by keeping a flag in the DOM. cb is a zero-arg callback — pass fn -> ....

fnset_styleset_style(el, prop, val) do dom_set_style(el, prop, val) end#

Set an inline CSS property on el (e.g. `set_style(el, \

fnset_textset_text(el, text) do dom_set_text(el, text) end#

Set the textContent of el. Replaces all children with a single text node; HTML is not interpreted.

fnset_timeoutset_timeout(ms, cb) do dom_set_timeout(ms, cb) end#

Call cb once after ms milliseconds (non-blocking, runs on the event loop). Equivalent to setTimeout. cb is a zero-arg callback — pass fn -> ....

fnset_valueset_value(el, val) do dom_set_value(el, val) end#

Set the value property of a form input, textarea, or select element.

fnstop_propagationstop_propagation(ev) do dom_stop_propagation(ev) end#

Stop ev from bubbling up to parent elements.

fnstore_getstore_get(key) do dom_store_get(key) end#

Read key from the browser's localStorage. Returns None if the key is absent or storage is unavailable (e.g. private browsing).

fnstore_setstore_set(key, val) do dom_store_set(key, val) end#

Write val under key in the browser's localStorage. Silently does nothing if storage is unavailable.

fntapstaps(el) do dom_taps(el) end#

Drain and return the pointer taps (pointerdown events) on el since the last call, as element-relative (x, y) integer pairs. The first call installs the buffering listener. Poll this once per animation frame for game input.

fntext_nodetext_node(text) do dom_create_text_node(text) end#

Create a text node containing the given string. Use append to attach it to an element.

fntoggle_classtoggle_class(el, cls) do dom_class_toggle(el, cls) end#

Toggle CSS class cls on el: add it if absent, remove it if present.

fnunlistenunlisten(el, event, handler) do dom_remove_event_listener(el, event, handler) end#

Remove a previously attached event listener. handler must be the same function value passed to listen.

fnwindow_sizewindow_size() do dom_window_size() end#

The browser window's inner size (window.innerWidth/innerHeight) in CSS pixels, as (w, h). No devicePixelRatio handling.