Element Extensions
Chainable methods on Element.prototype and DocumentFragment.prototype for content, classes, attributes, children, traversal, and event handlers.
Element
Source: src/prototype/Element.ts
| Method / Property | Description |
|---|---|
el.length |
this.children.length |
el.$i |
Index of the element among its parent's children |
el.$attributes |
All attributes as a plain { name: value } object |
el._(value) / el.__(value) |
Append / replace children — strings and numbers become a text node; plain objects are pretty-printed as <br>-joined JSON |
el._style(map) / el._data(map) / el._attr(map) |
Chainable: set multiple style / dataset / attribute key-values from an object |
el._class(list) |
Chainable: add one or more classes (string, comma/space/dot-separated, or array) |
el.class_(list) / el.style_(list) / el.data_(list) / el.attr_(list) |
Chainable: remove classes / clear styles / delete dataset keys / remove attributes |
el.$style(key) / el.$data(key) / el.$attr(key) |
Read a single style property / dataset entry / attribute value |
el.class__() |
Chainable: clears className entirely |
el.__class(list) |
Chainable: replaces the whole class list |
el.$$class(list) |
true only if every class in list is present |
el.$$class_(bool, list) |
Chainable: adds list when bool is falsy, removes it when truthy (or auto-detects current state if bool is omitted) |
el.$$data(key, value?) / el.$$attr(key, value?) |
true if the dataset/attribute value equals value, or is non-empty when value is omitted |
el._children(...args) |
Chainable: appends each argument via _child |
el._child(value, before) |
Chainable: append/insert a child (or array of children) by index or reference Element |
el.__child(value) |
Chainable: replaces children (replaceChildren) |
el.$child(value) |
Query a descendant by a mixed array of selector strings and numeric indices |
el.$parent(count) / el.$pre(count) / el.$next(count) |
Walk count steps up parentElement / previousElementSibling / nextElementSibling |
el.$sel(selector) / el.$selAll(selector) |
querySelector / querySelectorAll guarded against an empty selector |
el._click(fn) (and every DOM event name, e.g. _input, _keydown, _touchstart, _drop, ...) |
Chainable on<event> = fn assignment |
DocumentFragment
Source: src/prototype/DocumentFragment.ts
| Method / Property | Description |
|---|---|
fragment.innerHTML |
Serializes the fragment's contents via a detached <div> |
fragment.length |
this.children.length |
fragment._children(...args) |
Appends each argument as a child |
fragment._child(value) |
Appends a value (or array of values); strings/numbers become text nodes |