# 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 |