Edom (extended-dom) is an utility library, with the aim to make many common dom manipulation processes easier. This includes simple enhancements similar to jqueries
on(ev, func) and an complex animation framework, with an api similar to WAAPIs
$ npm i extended-dom
// Loads all required polyfills if needed (waapi & ResizeObserver)init.then
The following examples are just displaying the various aspects of edom. For the full implementation details please view the API.
General dom manipulation
Some properties get suffixed with their default unit (px, deg...) automatically. This rule generally applies to mothods of edom manipulating css properties (so
css() removes this suffix by default again when getting a property, though this can be disabled with a flag (
elemlet width = elem // 100let widthAsString = elem // "100px"
All edom methods not getting a value, return this as default. Thus they are chainable.
ElementList is an Interface exposing the whole Element API (including the edom API).
let ls = elemlsls
ElementList is an extention of
Array, thus the native Array API is available to manipulate the List.
ls;lslslet span = documentspaninner = "Element RED"ls5inner = span
Edom has xrray as dependency, a utility library in its usecase similiar to edom just for Arrays instead of the dom. Its API is also available in ElementList. For more detils please visit the documentation.
All getter functions (edom or native) return an array of the returned statements with to the ElementList matching indexes.
ls // ["foo", "bar", ...]
Further, additional to all
has...() functions (part of edom or native) on Element get additional
excludes...() functions. Contains returns true when all elements of the List match whatever
... is, and excludes true when none do so.
ls // true / falsels // true / falsels // [true, false, ...]
The animation framework relies on the WAAPI engine everywhere possible. It provides a abstraction layer to make the WAAPI work as it should with (a lot of) bells and whistles.
Similar to the WAAPI animation can be given as object literals in one of the following fashions.
This example animates from the current position to
Note that the from frame gets calculated by default as the current style of the element. To disable this set the offset of the first frame manually to 0 (only possible with the following syntax).
await elemawait elem
This syntax does not support offset declaration
Edom animations support options as second argument similar to the WAAPI.
All options have as wildely as possible applicable defaults (with an focus on UX design). The obove given options are the defaults.
You may wonder about the
name option. This is used in the developer tools as indecator of the percentage of the animation.
Comming soon (why not a wrapper like jquery)