apprt-dom

The apprt-dom bundle provides helper functions to work with the browser's DOM.

See also the bundle's API Documentation for more details.

Motivation

Native browser APIs today are often 'good enough' and should be preferred where possible. For example, setting a css class using modern JavaScript is as simple as writing

// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
domNode.classList.add("my-class-name");

Functions in this bundle are designed for situations where browser APIs are cumbersome to use or do not provide a good alternative to old dojo functionality.

For example, the CSS related functions in this bundle also handle space separated css classes (in strings or arrays of strings), which would throw an exception when using classList:

import { addClass } from "apprt-dom";
node.classList.add("foo bar"); // DOMException: String contains an invalid character
node.classList.add("foo", "bar"); // Works
addClass(node, "foo bar"); // Works and adds both "foo" and "bar"

Migration from dojo modules

Many usages of dom-related dojo modules can be replaced directly with modern browser APIs or functions from this bundle.

dojo	replacement
dom-construct	apprt-dom
`.create()`, `.place()`, `.destroy()`	`createElement()`, `insertElement()`, `destroyElement()`
dom-class	apprt-dom
`.add()`, `.remove()`, `.toggle()`	`addClass()`, `removeClass()`, `applyClass()` for simple use cases it might be sufficient to use `node.classList`
dom-attr	native browser APIs
`.set()`, `.get()`, `.remove()`	`node.setAttribute()`, `node.getAttribute()`, `node.removeAttribute()`
dom-style	native browser APIs
`.set()`	`node.style.cssPropertyName = value`
dom-geometry	apprt-dom
`.getMarginBox()`, `setMarginBox()` , `getMarginSize()`	`getMarginBox()`, `setMarginBox`, `getMarginSize()`