The apprt-dom bundle provides helper functions to work with the browser's DOM.
See also the bundle's API Documentation for more details.
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"
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() |