{"id":22160404,"url":"https://github.com/rozek/dommali","last_synced_at":"2025-07-26T09:31:35.853Z","repository":{"id":57885285,"uuid":"527106032","full_name":"rozek/dommali","owner":"rozek","description":"a lightweight DOM manipulation library with jQuery-inspired \"fluent\" API","archived":false,"fork":false,"pushed_at":"2024-09-21T13:08:24.000Z","size":405,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-14T02:04:17.302Z","etag":null,"topics":["dom-manipulation","fluent-api","javascript","jquery","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-21T04:36:32.000Z","updated_at":"2024-11-18T03:16:18.000Z","dependencies_parsed_at":"2025-03-30T12:01:45.706Z","dependency_job_id":"a566143d-1b09-48cb-9329-a55a795eb231","html_url":"https://github.com/rozek/dommali","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/dommali","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdommali","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdommali/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdommali/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdommali/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/dommali/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fdommali/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267145515,"owners_count":24042650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-manipulation","fluent-api","javascript","jquery","typescript"],"created_at":"2024-12-02T04:07:43.821Z","updated_at":"2025-07-26T09:31:35.494Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","readme":"# dommali #\n\na lightweight DOM manipulation library with jQuery-inspired \"fluent\" API\n\nThe use of jQuery makes DOM manipulation code compact and legible - but it is a rather large library with many no longer required features. The idea behind `dommali` (pronounced \"dom-ma-li\") is to create a thin layer on top of the API of modern browsers (excluding MS IE and \"classic\" MS Edge!) that still allows code to be as concise as jQuery would do.\n\n`dommali` was inspired by [nanoJS](https://github.com/vladocar/nanoJS) and [femtoJS](https://github.com/vladocar/femtoJS) - and like those, its implementation is so simple that it is not too difficult to add new methods or remove unwanted ones in order to enhance functionality or reduce size.\n\n**Important: `dommali` is no drop-in replacement for jQuery!** If you need something like that, look for [Zepto.js](https://github.com/ZeptoJS/Zepto.js), [Cash](https://github.com/fabiospampinato/cash), [UmbrellaJS](https://github.com/franciscop/umbrella), [Chibi](https://github.com/kylebarrow/chibi) or similar\n\nThe most notable differences between `dommali` and jQuery (or a look-alike) are:\n\n* iterator callback functions do not bind `this` to the DOM element just processed, instead they get a corresponding `dommali` object as their first argument - as a consequence, \"fat arrow\" functions may more easily serve as callbacks\n* methods retrieving the current size and position of a DOM element have specific names which makes their intention more obvious particularly for casual programmers: f.e., `positionInViewport` vs. `positionInParent` vs. `positionOnPage`\n* additionally, some methods have names (or synonyms) which indicate whether they return _layout_ or _render_ measures: _layout_ positions and dimensions are used by the browser layout engine and do not consider any [CSS transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) applied to DOM elements, whereas _render_ measures take such transforms into account\n* `dommali` does not define its own event object - nowadays, creating DOM events is so simple that there is just no need for a wrapper. It _does_, however, support `extraParameters` passed when triggering an event and Event `data` specified while registering an event handler\n* within asynchronous functions it is possible to \u003ca href=\"#waitFor\"\u003e`waitFor`\u003c/a\u003e the arrival of an event or to write loops that \u003ca href=\"#repeatUntil\"\u003e`repeatUntil`\u003c/a\u003e a given event arrives - both functions may also be provided with a timeout in order to prevent waiting or looping forever\n* event handler registrations support the special \"selector\" `@this` which effectively prevents the handler from being invoked by bubbling events\n* both event handler management functions and \u003ca href=\"#waitFor\"\u003e`waitFor`\u003c/a\u003e or \u003ca href=\"#repeatUntil\"\u003e`repeatUntil`\u003c/a\u003e support \u003ca href=\"#NotesOnAnchoredEvents\"\u003eanchored events\u003c/a\u003e, i.e., event names followed by a CSS selector which restricts the events to be handled to those triggered on specific elements only\n* `dommali` does not support CSS _animations_ but animated CSS transitions - and those are really simple\n\n**NPM users**: please consider the [Github README](https://github.com/rozek/dommali/blob/main/README.md) for the latest description of this package (as updating the docs would otherwise always require a new NPM package version)\n\n\u003e Just a small note: if you like this module and plan to use it, consider \"starring\" this repository (you will find the \"Star\" button on the top right of this page), so that I know which of my repositories to take most care of.\n\n## Overview ##\n\nHere are the methods provided by `dommali` in alphabetical order:\n\n\u003ctable\u003e\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"width:33%\"\u003e\u003ca href=\"#dommali\"\u003e\u003ccode\u003edommali()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u0026nbsp;\u003cbr\u003e\u003ca href=\"#extraParametersOfEvent\"\u003e\u003ccode\u003eDomMaLi.extraParametersOfEvent()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#ready\"\u003e\u003ccode\u003eDomMaLi.ready()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#textHeight\"\u003e\u003ccode\u003eDomMaLi.textHeight()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#textWidth\"\u003e\u003ccode\u003eDomMaLi.textWidth()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u0026nbsp;\u003cbr\u003e\u003ca href=\"#addClass\"\u003e\u003ccode\u003eaddClass()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#append\"\u003e\u003ccode\u003eappend()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#appendText\"\u003e\u003ccode\u003eappendText()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#attr\"\u003e\u003ccode\u003eattr()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#blur\"\u003e\u003ccode\u003eblur()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#children\"\u003e\u003ccode\u003echildren()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#closest\"\u003e\u003ccode\u003eclosest()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#contains\"\u003e\u003ccode\u003econtains()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#css\"\u003e\u003ccode\u003ecss()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#data\"\u003e\u003ccode\u003edata()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#eq\"\u003e\u003ccode\u003eeq()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#filter\"\u003e\u003ccode\u003efilter()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#find\"\u003e\u003ccode\u003efind()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#findFirst\"\u003e\u003ccode\u003efindFirst()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#first\"\u003e\u003ccode\u003efirst()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#firstChild\"\u003e\u003ccode\u003efirstChild()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#focus\"\u003e\u003ccode\u003efocus()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#focusedElement\"\u003e\u003ccode\u003efocusedElement()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#forEach\"\u003e\u003ccode\u003eforEach()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#hasAttr\"\u003e\u003ccode\u003ehasAttr()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#hasClass\"\u003e\u003ccode\u003ehasClass()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#hasData\"\u003e\u003ccode\u003ehasData()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#hasProp\"\u003e\u003ccode\u003ehasProp()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#height\"\u003e\u003ccode\u003eheight()\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd style=\"width:33%\"\u003e\u003ca href=\"#hide\"\u003e\u003ccode\u003ehide()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#html\"\u003e\u003ccode\u003ehtml()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#indexOf\"\u003e\u003ccode\u003eindexOf()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#innerHeight\"\u003e\u003ccode\u003einnerHeight()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#innerWidth\"\u003e\u003ccode\u003einnerWidth()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#insertAfter\"\u003e\u003ccode\u003einsertAfter()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#insertBefore\"\u003e\u003ccode\u003einsertBefore()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#isAttached\"\u003e\u003ccode\u003eisAttached()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#isEmpty\"\u003e\u003ccode\u003eisEmpty()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#isFocused\"\u003e\u003ccode\u003eisFocused()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#last\"\u003e\u003ccode\u003elast()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#lastChild\"\u003e\u003ccode\u003elastChild()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#layoutHeight\"\u003e\u003ccode\u003elayoutHeight()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#layoutPositionInParent\"\u003e\u003ccode\u003elayoutPositionInParent()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#layoutPositionOnPage\"\u003e\u003ccode\u003elayoutPositionOnPage()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#layoutWidth\"\u003e\u003ccode\u003elayoutWidth()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#length\"\u003e\u003ccode\u003eget length()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#matches\"\u003e\u003ccode\u003ematches()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#next\"\u003e\u003ccode\u003enext()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#off\"\u003e\u003ccode\u003eoff()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#on\"\u003e\u003ccode\u003eon()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#once\"\u003e\u003ccode\u003eonce()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#outerHeight\"\u003e\u003ccode\u003eouterHeight()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#outerWidth\"\u003e\u003ccode\u003eouterWidth()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#parent\"\u003e\u003ccode\u003eparent()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#positionInParent\"\u003e\u003ccode\u003epositionInParent()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#positionInViewport\"\u003e\u003ccode\u003epositionInViewport()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#positionOnPage\"\u003e\u003ccode\u003epositionOnPage()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#prepend\"\u003e\u003ccode\u003eprepend()\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n    \u003ctd style=\"width:33%\"\u003e\u003ca href=\"#prependText\"\u003e\u003ccode\u003eprependText()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#prev\"\u003e\u003ccode\u003eprev()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#prop\"\u003e\u003ccode\u003eprop()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#remove\"\u003e\u003ccode\u003eremove()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#removeAttr\"\u003e\u003ccode\u003eremoveAttr()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#removeClass\"\u003e\u003ccode\u003eremoveClass()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#removeData\"\u003e\u003ccode\u003eremoveData()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#removeProp\"\u003e\u003ccode\u003eremoveProp()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#renderHeight\"\u003e\u003ccode\u003erenderHeight()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#renderPositionInViewport\"\u003e\u003ccode\u003erenderPositionInViewport()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#renderWidth\"\u003e\u003ccode\u003erenderWidth()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#repeatUntil\"\u003e\u003ccode\u003erepeatUntil()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#replaceWith\"\u003e\u003ccode\u003ereplaceWith()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#scrollHeight\"\u003e\u003ccode\u003escrollHeight()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#scrollLeft\"\u003e\u003ccode\u003escrollLeft()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#scrollTo\"\u003e\u003ccode\u003escrollTo()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#scrollTop\"\u003e\u003ccode\u003escrollTop()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#scrollWidth\"\u003e\u003ccode\u003escrollWidth()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#show\"\u003e\u003ccode\u003eshow()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#size isEmpty\"\u003e\u003ccode\u003esize()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#slice\"\u003e\u003ccode\u003eslice()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#subject\"\u003e\u003ccode\u003esubject()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#subjects\"\u003e\u003ccode\u003esubjects()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#text\"\u003e\u003ccode\u003etext()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#toggleClass\"\u003e\u003ccode\u003etoggleClass()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#transition\"\u003e\u003ccode\u003etransition()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#trigger\"\u003e\u003ccode\u003etrigger()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#waitFor\"\u003e\u003ccode\u003ewaitFor()\u003c/code\u003e\u003c/a\u003e\u003cbr\u003e\u003ca href=\"#width\"\u003e\u003ccode\u003ewidth()\u003c/code\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\u003c/table\u003e\n\n## Installation ##\n\n`dommali` may be used as an ECMAScript module (ESM), a CommonJS or AMD module or from a global variable.\n\nYou may either install the package into your build environment using [NPM](https://docs.npmjs.com/) with the command\n\n```\nnpm install dommali\n```\n\nor load the plain script file directly\n\n```html\n\u003cscript src=\"https://unpkg.com/dommali\"\u003e\u003c/script\u003e\n```\n\n## Access ##\n\nHow to access the package depends on the type of module you prefer\n\n* ESM (or Svelte): `import dommali from 'dommali'`\n* CommonJS: `const dommali = require('dommali')`\n* AMD: `require(['dommali'], (dommali) =\u003e {...})`\n\nAlternatively, you may access the global variable `dommali` directly.\n\n## Usage within Svelte ##\n\nFor Svelte, it is recommended to import the package in a module context. From then on, its exports may be used as usual:\n\n```html\n\u003cscript context=\"module\"\u003e\n  import dommali from 'dommali'\n\u003c/script\u003e\n\n\u003cscript\u003e\n  const $ = dommali // make \"dommali\" calls look like \"jQuery\" ones\n  $(document.body).html('\u003ch1\u003eHello, World!\u003c/h1\u003e')\n\u003c/script\u003e\n```\n\n## Usage as ECMAscript, CommonJS or AMD Module (or as a global Variable) ##\n\nLet's assume that you already \"required\" or \"imported\" (or simply loaded) the module according to your local environment. In that case, you may use it as follows:\n\n```javascript\nconst $ = dommali // make \"dommali\" calls look like \"jQuery\" ones\n$(document.body).html('\u003ch1\u003eHello, World!\u003c/h1\u003e')\n```\n\n## API Reference ##\n\nSimilar to jQuery, `dommali` objects (i.e., instances of type `DOMMaLi`) represent collections of zero, one or multiple DOM elements. Internally, these elements may not be listed in document order unless they have been found by a CSS query or retrieved as the children of another element. While `dommali` objects may represent DOM elements of any type, some methods only work on items of type `HTMLElement` (other elements will be ignored) -  those methods are explicitly marked in their description.\n\nThe signatures shown below are those used by TypeScript\n\n### Factory Function ###\n\n* \u003ca name=\"dommali\"\u003e\u003c/a\u003e**`dommali():DOMMaLi`**\u003cbr\u003ereturns a new empty `dommali` object, i.e., one that represents no DOM element\n* **`dommali(startup:Function):typeof DOMMaLi`**\u003cbr\u003eis a shortcut for `DOMMaLi.ready(startup)` (see below)\n* **`dommali(selector:string):DOMMaLi`**\u003cbr\u003ereturns a `dommali` object representing all DOM elements matching the given CSS selector\n* **`dommali(html:string):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing all DOM elements created from the given HTML code\n* **`dommali(element:Element):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing the given DOM element\n* **`dommali(elements:Element[]):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing the given DOM elements (in the given order)\n* **`dommali(bridge:DOMMaLi):DOMMaLi`**\u003cbr\u003ereturns a duplicate of the given `dommali` object\n\n### Class Methods ###\n\n* \u003ca name=\"extraParametersOfEvent\"\u003e\u003c/a\u003e**`DOMMaLi.extraParametersOfEvent(Event:Event):any[]`**\u003cbr\u003ereturns the (possible empty) list of additional arguments passed when the given `Event` was triggered (see \u003ca href=\"#trigger\"\u003e`trigger`)\u003c/a\u003e\n* \u003ca name=\"ready\"\u003e\u003c/a\u003e**`DOMMaLi.ready(startup:Function):typeof DOMMaLi`**\u003cbr\u003eregisters a function which is to be called as soon as the DOM is ready (i.e., all DOM elements are present although images and other resources may not be completely loaded). If the DOM is ready at the moment the startup functions wants to be registered, it will be invoked immediately. It is safe to register new startup functions at any time - even while they are being executed\n* \u003ca name=\"textHeight\"\u003e\u003c/a\u003e**`DOMMaLi.textHeight(Text:string, TemplateOrSettings?:any):number`**\u003cbr\u003ereturns the height of a given `Text` (in pixels) when rendered in a given `dommali` object, a given DOM element or in its own DOM element with given CSS settings. For that purpose, the optional `TemplateOrSettings` argument may contain either a `dommali` object, a DOM element or a plain JavaScript object with one or multiple \"relevant\" CSS settings. Relevant CSS settings include `font-family`, `font-size`, `font-weight`, `font-style`, `font-variant`, `font-variant-caps`, `font-variant-numeric`, `font-variant-alternates`, `font-variant-ligatures`, `font-variant-east-asian`, `font-stretch`, `font-kerning`, `font-size-adjust`, `font-synthesis`, `font-language-override`, `white-space`, `letter-spacing`, `word-spacing`, `text-indent`, `text-transform`, `word-break`, `line-break`, `line-height` and `width` - other CSS settings will be ignored. Please note, that you may specify a desired text `width` explicity in order to enforce line wrapping of long texts\n* \u003ca name=\"textWidth\"\u003e\u003c/a\u003e**`DOMMaLi.textWidth(Text:string, TemplateOrSettings?:any):number`**\u003cbr\u003ereturns the width of a given `Text` (in pixels) when rendered in a given `dommali` object, a given DOM element or in its own DOM element with given CSS settings. For that purpose, the optional `TemplateOrSettings` argument may contain either a `dommali` object, a DOM element or a plain JavaScript object with one or multiple \"relevant\" CSS settings. Relevant CSS settings include `font-family`, `font-size`, `font-weight`, `font-style`, `font-variant`, `font-variant-caps`, `font-variant-numeric`, `font-variant-alternates`, `font-variant-ligatures`, `font-variant-east-asian`, `font-stretch`, `font-kerning`, `font-size-adjust`, `font-synthesis`, `font-language-override`, `white-space`, `letter-spacing`, `word-spacing`, `text-indent` and `text-transform` - other CSS settings will be ignored\n\n### Object Inspection ###\n\n* \u003ca name=\"get\"\u003e\u003c/a\u003e**`get length ():number`**\u003cbr\u003econtains the number of DOM elements represented by this `dommali` object\n* \u003ca name=\"size\"\u003e\u003c/a\u003e**`size ():number`**\u003cbr\u003ereturns the number of DOM elements represented by this `dommali` object\n* \u003ca name=\"isEmpty\"\u003e\u003c/a\u003e**`isEmpty ():boolean`**\u003cbr\u003ereturns `true` if this `dommali` object does not represent any DOM element - or `false` otherwise\n* \u003ca name=\"subjects\"\u003e\u003c/a\u003e**`subjects ():Element[]`**\u003cbr\u003ereturns a copy of the list of DOM elements represented by this `dommali` object\n* \u003ca name=\"subject\"\u003e\u003c/a\u003e**`subject (Index:number):Element|undefined`**\u003cbr\u003ereturns the single item found at index `Index` in the list of DOM elements represented by this `dommali` object - or `undefined` if no such item exists\n* \u003ca name=\"indexOf\"\u003e\u003c/a\u003e**`indexOf (Value:Element|DOMMaLi):number`**\u003cbr\u003elooks for the given DOM element or the first element represented by the _given_ `dommali` object in the list of DOM elements represented by _this_ `dommali` object and returns its index - or `-1` if the element can not be found\n\n### Element Extraction ###\n\n* \u003ca name=\"slice\"\u003e\u003c/a\u003e**`slice (start?:number, end?:number):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing all items from the list of DOM elements represented by _this_ `dommali` object starting at index `start` and ending before index `end` (or until the end of the list, if `end` was omitted). If both `start` and `end` are missing, _this_ `dommali` object is simply duplicated\n* \u003ca name=\"first\"\u003e\u003c/a\u003e**`first ():DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing the first element from the list of DOM elements represented by _this_ `dommali` object - or any empty `dommali` object if _this_ one is empty as well\n* \u003ca name=\"last\"\u003e\u003c/a\u003e**`last ():DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing the last element from the list of DOM elements represented by _this_ `dommali` object - or any empty `dommali` object if _this_ one is empty as well\n* \u003ca name=\"eq\"\u003e\u003c/a\u003e**`eq (Index:number):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing the element at index `Index` from the list of DOM elements represented by _this_ `dommali` object - or any empty `dommali` object if no such element exists\n\n### Content Iterators ###\n\n* \u003ca name=\"forEach\"\u003e\u003c/a\u003e**`forEach (Callback:(Item:DOMMaLi, Index:number, Container:DOMMaLi) =\u003e any):DOMMaLi`**\u003cbr\u003eiterates over all DOM elements represented by _this_ `dommali` object and invokes the given `Callback` function with the following arguments:\u003cbr\u003ea `dommali` object representing the current DOM element, its index in the list of DOM elements represented by _this_ `dommali` object and that object itself. **In contrast to jQuery and many other similar libraries, `this` is _not_ bound to the current DOM element - this simplifies the use of \"fat arrow\" functions as callbacks**\n* \u003ca name=\"filter\"\u003e\u003c/a\u003e**`filter (Selector:string|String):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing only those DOM elements from _this_ `dommali` object which match the given CSS selector \n* **`filter (Callback:(Item:DOMMaLi, Index:number, Container:DOMMaLi) =\u003e boolean):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing only those DOM elements from _this_ `dommali` object for which the given `Callback` function returns true. This function is invoked with the following arguments:\u003cbr\u003ea `dommali` object representing the current DOM element, its index in the list of DOM elements represented by _this_ `dommali` object and that object itself. **In contrast to jQuery and many other similar libraries, `this` is _not_ bound to the current DOM element - this simplifies the use of \"fat arrow\" functions as callbacks**\n\n### CSS Queries ###\n\n* \u003ca name=\"matches\"\u003e\u003c/a\u003e**`matches (Selector:string|String):boolean`**\u003cbr\u003ereturns `true` if the first DOM element represented by this `dommali` object matches the given CSS selector - or `false` otherwise\n* \u003ca name=\"find\"\u003e\u003c/a\u003e**`find (Selector:string|String):DOMMaLi`**\u003cbr\u003ereturns a new (and possibly empty) `dommali` object representing all those DOM elements within the scope of this `dommali` object that match the given CSS selector\n* \u003ca name=\"findFirst\"\u003e\u003c/a\u003e**`findFirst (Selector:string|String):DOMMaLi`**\u003cbr\u003ereturns a new (and possibly empty) `dommali` object representing the first DOM element within the scope of this `dommali` object that matches the given CSS selector\n\n### Position and Size ###\n\n* \u003ca name=\"positionInViewport\"\u003e\u003c/a\u003e**`positionInViewport ():{ left:number,top:number }|undefined`**\u003cbr\u003ereturns the _rendering_ position of the first DOM element represented by _this_ `dommali` object relative to the current viewport (or `undefined` if _this_ `dommali` object is empty)\n* \u003ca name=\"renderPositionInViewport\"\u003e\u003c/a\u003e**`renderPositionInViewport ():{ left:number,top:number }|undefined`**\u003cbr\u003eis just a synonym for `positionInViewport`, emphasizing the fact, that the _rendering_ position is returned (which depends of CSS transforms for that DOM element)\n* \u003ca name=\"positionInParent\"\u003e\u003c/a\u003e**`positionInParent ():{ left:number,top:number }|undefined`**\u003cbr\u003ereturns the _layout_ position of the first HTML element represented by _this_ `dommali` object relative to its \"offset parent\" (or `undefined` if either _this_ `dommali` object is empty, its first element is not an **HTML element** or no offset parent could be found)\n* \u003ca name=\"layoutPositionInParent\"\u003e\u003c/a\u003e**`layoutPositionInParent ():{ left:number,top:number }|undefined`**\u003cbr\u003eis just a synonym for `positionInParent`, emphasizing the fact, that the _layout_ position is returned (which is independent of any DOM element CSS transforms)\n* \u003ca name=\"positionOnPage\"\u003e\u003c/a\u003e**`positionOnPage ():{ left:number,top:number }|undefined`**\u003cbr\u003ereturns the _layout_ position of the first DOM element represented by _this_ `dommali` object relative to the document (or `undefined` if _this_ `dommali` object is empty or its first element is not an **HTML element**)\n* \u003ca name=\"layoutPositionOnPage\"\u003e\u003c/a\u003e**`layoutPositionOnPage ():{ left:number,top:number }|undefined`**\u003cbr\u003eis just a synonym for `positionOnPage`, emphasizing the fact, that the _layout_ position is returned (which is independent of any DOM element CSS transforms)\n* \u003ca name=\"width\"\u003e\u003c/a\u003e**`width (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the _layout_ width of the first DOM element represented by _this_ `dommali` object (or `undefined` if _this_ `dommali` object is empty or its first element is not an **HTML element**). Otherwise, the _layout_ width of all **HTML elements** represented by _this_ `dommali` object is set to the `newValue` pixels\n* \u003ca name=\"height\"\u003e\u003c/a\u003e**`height (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the _layout_ height of the first DOM element represented by _this_ `dommali` object (or `undefined` if _this_ `dommali` object is empty or its first element is not an **HTML element**). Otherwise, the _layout_ height of all **HTML elements** represented by _this_ `dommali` object is set to the `newValue` pixels\n* \u003ca name=\"layoutWidth\"\u003e\u003c/a\u003e**`layoutWidth (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eis just a synonym for `width`, emphasizing the fact, that the _layout_ width is returned or set (which is independent of any DOM element CSS transforms)\n* \u003ca name=\"layoutHeight\"\u003e\u003c/a\u003e**`layoutHeight (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eis just a synonym for `height`, emphasizing the fact, that the _layout_ height is returned or set (which is independent of any DOM element CSS transforms)\n* \u003ca name=\"outerWidth\"\u003e\u003c/a\u003e**`outerWidth (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eis just a synonym for `width`, emphasizing the fact, that the returned width includes the element's padding and border\n* \u003ca name=\"outerHeight\"\u003e\u003c/a\u003e**`outerHeight (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eis just a synonym for `height`, emphasizing the fact, that the returned height includes the element's padding and border\n* \u003ca name=\"renderWidth\"\u003e\u003c/a\u003e**`renderWidth ():number|undefined`**\u003cbr\u003ereturns the _render_ width of the first DOM element represented by _this_ `dommali` object (or `undefined` if _this_ `dommali` object is empty). The result is affected by any CSS transforms for that element\n* \u003ca name=\"renderHeight\"\u003e\u003c/a\u003e**`renderHeight ():number|undefined`**\u003cbr\u003ereturns the _render_ height of the first DOM element represented by _this_ `dommali` object (or `undefined` if _this_ `dommali` object is empty). The result is affected by any CSS transforms for that element\n* \u003ca name=\"innerWidth\"\u003e\u003c/a\u003e**`innerWidth ():number|undefined`**\u003cbr\u003ereturns the \"inner\" _layout_ width of the first DOM element represented by _this_ `dommali` object (or `undefined` if _this_ `dommali` object is empty) without border, padding and scrollbars\n* \u003ca name=\"innerHeight\"\u003e\u003c/a\u003e**`innerHeight ():number|undefined`**\u003cbr\u003ereturns the \"inner\" _layout_ height of the first DOM element represented by _this_ `dommali` object (or `undefined` if _this_ `dommali` object is empty) without border, padding and scrollbars\n\n### DOM Hierarchy ###\n\n* \u003ca name=\"parent\"\u003e\u003c/a\u003e**`parent ():DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing the \"parent\" of the first DOM element represented by _this_ `dommali` object (or an empty `dommali` object if this one is empty as well)\n* \u003ca name=\"closest\"\u003e\u003c/a\u003e**`closest (Selector:string|String):DOMMaLi`**\u003cbr\u003ereturns a new `dommali` object representing the innermost element among the first DOM element represented by _this_ `dommali` object and its parents, that matches the given `Selector` (or an empty `dommali` object if either this one is empty or no matching DOM element could be found)\n* \u003ca name=\"isAttached\"\u003e\u003c/a\u003e**`isAttached ():boolean`**\u003cbr\u003ereturns `true`, if the first DOM element represented by _this_ `dommali` object is part of the document - or `false` otherwise\n* \u003ca name=\"contains\"\u003e\u003c/a\u003e**`contains (Candidate:DOMMaLi):boolean`**\u003cbr\u003ereturns `true`, if the first DOM element represented by _this_ `dommali` object contains the first DOM element represented by the given `Candidate` - or `false` otherwise\n* \u003ca name=\"children\"\u003e\u003c/a\u003e**`children (Selector?:string|String):DOMMaLi`**\u003cbr\u003eif `Selector` is missing, this method returns a new `dommali` object representing all direct \"children\" of the first DOM element represented by _this_ `dommali` object. Otherwise, the new `dommali` object represents only those children which also match the given CSS `Selector`\n* \u003ca name=\"firstChild\"\u003e\u003c/a\u003e**`firstChild (Selector?:string|String):DOMMaLi`**\u003cbr\u003eif `Selector` is missing, this method returns a new `dommali` object representing the first direct \"child\" of the first DOM element represented by _this_ `dommali` object. Otherwise, the new `dommali` object represents the first child which also matches the given CSS `Selector`\n* \u003ca name=\"lastChild\"\u003e\u003c/a\u003e**`lastChild (Selector?:string|String):DOMMaLi`**\u003cbr\u003eif `Selector` is missing, this method returns a new `dommali` object representing the last direct \"child\" of the first DOM element represented by _this_ `dommali` object. Otherwise, the new `dommali` object represents the last child which also matches the given CSS `Selector`\n* \u003ca name=\"prev\"\u003e\u003c/a\u003e**`prev (Selector?:string|String):DOMMaLi`**\u003cbr\u003eif `Selector` is missing, this method returns a new `dommali` object representing the immediately preceding \"sibling\" of the first DOM element represented by _this_ `dommali` object - i.e., the direct child of that element's parent, which immediately precedes it. Otherwise, the new `dommali` object represents the nearest preceding \"sibling\" which also matches the given CSS `Selector`\n* \u003ca name=\"next\"\u003e\u003c/a\u003e**`next (Selector?:string|String):DOMMaLi`**\u003cbr\u003eif `Selector` is missing, this method returns a new `dommali` object representing the immediately following \"sibling\" of the first DOM element represented by _this_ `dommali` object - i.e., the direct child of that element's parent, which immediately follows it. Otherwise, the new `dommali` object represents the nearest following \"sibling\" which also matches the given CSS `Selector`\n\n### Visibility ###\n\n* \u003ca name=\"show\"\u003e\u003c/a\u003e**`show ():DOMMaLi`**\u003cbr\u003emakes all **HTML elements** represented by _this_ `dommali` object (potentially) visible by setting their CSS property `display` to a value different from `none` - if possible, `dommali` tries to restore any setting that was active before an element was hidden. Otherwise, it uses the default setting for the given element tag - or `block` if all fails\n* \u003ca name=\"hide\"\u003e\u003c/a\u003e**`hide ():DOMMaLi`**\u003cbr\u003emakes all **HTML elements** represented by _this_ `dommali` object invisible by setting their CSS property `display` to `none`\n\n### Scrolling ###\n\n* \u003ca name=\"scrollLeft\"\u003e\u003c/a\u003e**`scrollLeft (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the number of pixels by which the first DOM element represented by this `dommali` object is scrolled from its left edge (or `undefined` if this `dommali` object is empty) Otherwise, it scrolls all DOM elements represented by this `dommali` object to a position `newValue` pixels from their left edge\n* \u003ca name=\"scrollTop\"\u003e\u003c/a\u003e**`scrollTop (newValue?:number):number|DOMMaLi|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the number of pixels by which the first DOM element represented by this `dommali` object is scrolled from its top edge (or `undefined` if this `dommali` object is empty) Otherwise, it scrolls all DOM elements represented by this `dommali` object to a position `newValue` pixels from their top edge\n* \u003ca name=\"scrollWidth\"\u003e\u003c/a\u003e**`scrollWidth ():number|undefined`**\u003cbr\u003ereturns the width of the contents of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty), including content not visible due to an overflow\n* \u003ca name=\"scrollHeight\"\u003e\u003c/a\u003e**`scrollHeight ():number|undefined`**\u003cbr\u003ereturns the height of the contents of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty), including content not visible due to an overflow\n* \u003ca name=\"scrollTo\"\u003e\u003c/a\u003e**`scrollTo (x:number, y:number, Mode:'instant'|'smooth'|'auto' = 'auto'):DOMMaLi`**\u003cbr\u003escrolls all DOM elements represented by this `dommali` object to a position `x` pixels from their left and `y` pixels from their top edge. If given, `Mode` specifies whether the scrolling should animate smoothly or happen instantly in a single jump\n\n### CSS Class Management ###\n\n* \u003ca name=\"hasClass\"\u003e\u003c/a\u003e**`hasClass (Classes:string):boolean`**\u003cbr\u003ereturns `true` if the first DOM element represented by this `dommali` object is associated with all (space-separated) CSS classes given by `Classes` - or `false` otherwise\n* \u003ca name=\"addClass\"\u003e\u003c/a\u003e**`addClass (Classes:string):DOMMaLi`**\u003cbr\u003eassociates all DOM elements represented by this `dommali` object with the (space-separated) CSS classes given by `Classes`\n* \u003ca name=\"toggleClass\"\u003e\u003c/a\u003e**`toggleClass (Classes:string):DOMMaLi`**\u003cbr\u003etoggles the association of all DOM elements represented by this `dommali` object with the (space-separated) CSS classes given by `Classes`\n* \u003ca name=\"removeClass\"\u003e\u003c/a\u003e**`removeClass (Classes:string):DOMMaLi`**\u003cbr\u003eremoves the association of all DOM elements represented by this `dommali` object with the (space-separated) CSS classes given by `Classes`\n\n### Insertion and Removal ###\n\n* \u003ca name=\"append\"\u003e\u003c/a\u003e**`append (Content:string|String|DOMMaLi|Element|Element[]):DOMMaLi`**\u003cbr\u003eif `Content` contains HTML code, this method inserts the DOM elements repeatedly created based on `Content` at the end of every DOM element represented by this `dommali` object - otherwise the DOM elements given by `Content` are inserted at the end of the _first_ DOM element represented by this `dommali` object only. `Content` may contain HTML code, CSS selectors, one or multiple DOM elements or another `dommali` object\n* \u003ca name=\"prepend\"\u003e\u003c/a\u003e**`prepend (Content:string|String|DOMMaLi|Element|Element[]):DOMMaLi`**\u003cbr\u003eif `Content` contains HTML code, this method inserts the DOM elements repeatedly created based on `Content` at the beginning of every DOM element represented by this `dommali` object - otherwise the DOM elements given by `Content` are inserted at the beginning of the _first_ DOM element represented by this `dommali` object only. `Content` may contain HTML code, CSS selectors, one or multiple DOM elements or another `dommali` object\n* \u003ca name=\"insertAfter\"\u003e\u003c/a\u003e**`insertAfter (Content:DOMMaLi):DOMMaLi`**\u003cbr\u003einserts all DOM elements represented by this `dommali` object after the first DOM element represented by the given `Content`. `Content` may contain HTML code, CSS selectors, one or multiple DOM elements or another `dommali` object\n* \u003ca name=\"insertBefore\"\u003e\u003c/a\u003e**`insertBefore (Content:DOMMaLi):DOMMaLi`**\u003cbr\u003einserts all DOM elements represented by this `dommali` object before the first DOM element represented by the given `Content`. `Content` may contain HTML code, CSS selectors, one or multiple DOM elements or another `dommali` object\n* \u003ca name=\"replaceWith\"\u003e\u003c/a\u003e**`replaceWith (Replacement:string|String|DOMMaLi|Element|Element[]):void`**\u003cbr\u003eif `Content` contains HTML code, this method replaces every DOM element represented by this `dommali` object by the DOM elements repeatedly created based on `Content` - otherwise the _first_ DOM element represented by this `dommali` object is replaced by the DOM elements given by `Content`. `Content` may contain HTML code, CSS selectors, one or multiple DOM elements or another `dommali` object\n* \u003ca name=\"remove\"\u003e\u003c/a\u003e**`remove ():DOMMaLi`**\u003cbr\u003eremoves all DOM elements represented by this `dommali` object\n\n### Properties ###\n\n* \u003ca name=\"prop\"\u003e\u003c/a\u003e**`prop (Property:string, newValue?:any):DOMMaLi|any|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the value of property `Property` of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty). Otherwise, property `Property` of all DOM elements represented by this `dommali` object is set to `newValue`\n* \u003ca name=\"hasProp\"\u003e\u003c/a\u003e**`hasProp (Property:string):boolean`**\u003cbr\u003ereturns `true` if property `Property` is found in the _first_ DOM element represented by this `dommali` object - or `false` otherwise\n* \u003ca name=\"removeProp\"\u003e\u003c/a\u003e**`removeProp (Property:string):DOMMaLi`**\u003cbr\u003eremoves property `Property` from all DOM elements represented by this `dommali` object\n\n### Data ###\n\n* \u003ca name=\"data\"\u003e\u003c/a\u003e**`data (Key:string, newValue?:any):DOMMaLi|any|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the value of data entry `Key` of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty). Otherwise, data entry `Key` of all DOM elements represented by this `dommali` object is set to `newValue`. **Data entries are custom values of any JavaScript type stored in DOM elements without polluting their namespace or overwriting DOM element properties or methods**\n* \u003ca name=\"hasData\"\u003e\u003c/a\u003e**`hasData (Key:string):boolean`**\u003cbr\u003ereturns `true` if data entry `Key` is found in the _first_ DOM element represented by this `dommali` object - or `false` otherwise\n* \u003ca name=\"removeData\"\u003e\u003c/a\u003e**`removeData (Key:string):DOMMaLi`**\u003cbr\u003eremoves data entry `Key` from all DOM elements represented by this `dommali` object\n\n### Attributes ###\n\n* \u003ca name=\"attr\"\u003e\u003c/a\u003e**`attr (Attribute:string, newValue?:any):DOMMaLi|string|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the value of HTML attribute `Attribute` of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty). Otherwise, the HTML attribute `Attribute` of all DOM elements represented by this `dommali` object is set to `newValue`\n* \u003ca name=\"hasAttr\"\u003e\u003c/a\u003e**`hasAttr (Attribute:string):boolean`**\u003cbr\u003ereturns `true` if HTML attribute `Attribute` is found in the _first_ DOM element represented by this `dommali` object - or `false` otherwise\n* \u003ca name=\"removeAttr\"\u003e\u003c/a\u003e**`removeAttr (Attribute:string):DOMMaLi`**\u003cbr\u003eremoves HTML attribute `Attribute` from all DOM elements represented by this `dommali` object\n\n### CSS ###\n\n* \u003ca name=\"css\"\u003e\u003c/a\u003e**`css (Property:string|string, newValue?:string):DOMMaLi|string|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the _computed_ value of CSS property `Property` of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty). Otherwise, the CSS property `Property` of all DOM elements represented by this `dommali` object is set to `newValue`\n* **`css (PropertyList:string[]):PlainObject|undefined`**\u003cbr\u003ereturns the _computed_ values of all CSS properties given by `PropertyList` of the first DOM element represented by this `dommali` object as a plain JavaScript object with the given property names as keys (or `undefined` if this `dommali` object is empty)\n* **`css (PropertySet:PlainObject):DOMMaLi`**\u003cbr\u003esets the CSS properties given by the keys of `PropertySet` of all DOM elements represented by this `dommali` object to the values specified in `PropertySet`\n\n### Contents ###\n\n* \u003ca name=\"html\"\u003e\u003c/a\u003e**`html (newValue?:string):DOMMaLi|string|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the _inner HTML_ of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty). Otherwise, the _inner HTML_ of all DOM elements represented by this `dommali` object is set to `newValue`\n* \u003ca name=\"text\"\u003e\u003c/a\u003e**`text (newValue?:string):DOMMaLi|string|undefined`**\u003cbr\u003eif no `newValue` is given, this method returns the _inner text_ of the first DOM element represented by this `dommali` object (or `undefined` if this `dommali` object is empty). Otherwise, the _inner text_ of all DOM elements represented by this `dommali` object is set to `newValue`\n* \u003ca name=\"appendText\"\u003e\u003c/a\u003e**`appendText (Value:string):DOMMaLi`**\u003cbr\u003einserts the text given by `Value` after the _inner text_ of all DOM elements represented by this `dommali` object\n* \u003ca name=\"prependText\"\u003e\u003c/a\u003e**`prependText (Value:string):DOMMaLi`**\u003cbr\u003einserts the text given by `Value` before the _inner text_ of all DOM elements represented by this `dommali` object\n\n### Event Handling ###\n\n* \u003ca name=\"on\"\u003e\u003c/a\u003e**`on (anchoredEvent:string, Handler:Function):DOMMaLi`**\u003cbr\u003eregisters the given event handler `Handler` for the event `anchoredEvent` in all DOM elements represented by this `dommali` object. `Handler` will be invoked whenever the given `Event` is triggered on the given \"anchor\" as seen from these DOM elements (provided that the event is allowed to \"bubble\" if the anchor is a descendant of a given DOM object). If `Handler` returns the explicit value `false`, `Event.stopPropagation()` and `Event.preventDefault()` are called for the current event\n* **`on (Events:string, Handler:Function):DOMMaLi`**\u003cbr\u003eregisters the given event handler `Handler` for every event in the (space-separated) list given by `Events` in all DOM elements represented by this `dommali` object. `Handler` will be invoked whenever one of the given `Events` is triggered on one of these DOM elements themselves or one of their descendants (if the event is allowed to \"bubble\"). If `Handler` returns the explicit value `false`, `Event.stopPropagation()` and `Event.preventDefault()` are called for the current event\n* **`on (Events:string, Selector:string|String|null, Handler:Function):DOMMaLi`**\u003cbr\u003eregisters the given event handler `Handler` as a \"delegated event handler\" for every event in the (space-separated) list given by `Events` in all DOM elements represented by this `dommali` object. `Handler` will be invoked whenever one of the given `Events` is triggered on one of these DOM elements themselves or one of their descendants (if the event is allowed to \"bubble\") - provided that the original event target matches the given CSS `Selector`. Setting `Selector` to `null` simply skips the matching. If `Handler` returns the explicit value `false`, `Event.stopPropagation()` and `Event.preventDefault()` are called for the current event\n* **`on (anchoredEvent:string, Data:any, Handler:Function):DOMMaLi`**\u003cbr\u003eregisters the given event handler `Handler` for the event `anchoredEvent` in all DOM elements represented by this `dommali` object. `Handler` will be invoked whenever the given `Event` is triggered on the given \"anchor\" as seen from these DOM elements (provided that the event is allowed to \"bubble\" if the anchor is a descendant of a given DOM object). Additionally, property `data` of the incoming event is set to `Data` before the registered handler is called. If `Handler` returns the explicit value `false`, `Event.stopPropagation()` and `Event.preventDefault()` are called for the current event\n* **`on (Events:string, Selector:string|String|null, Data:any, Handler:Function):DOMMaLi`**\u003cbr\u003eregisters the given event handler `Handler` (as a \"delegated event handler\" if `Selector` is not `null`) for every event in the (space-separated) list given by `Events` in all DOM elements represented by this `dommali` object. `Handler` will be invoked whenever one of the given `Events` is triggered on one of these DOM elements themselves or one of their descendants (if the event is allowed to \"bubble\") - provided that the original event target matches the given CSS `Selector`. Additionally, property `data` of the incoming event is set to `Data` before the registered handler is called. Setting `Selector` to `null` simply skips the matching. If `Handler` returns the explicit value `false`, `Event.stopPropagation()` and `Event.preventDefault()` are called for the current event\u003cbr\u003e\u0026nbsp;\n* \u003ca name=\"once\"\u003e\u003c/a\u003e**`once (Events:string, Handler:Function):DOMMaLi`**\u003cbr\u003ebehaves like `once(Events,Handler)`, but automatically unregisters the given `Handler` upon its first invocation\n* **`once (anchoredEvent:string, Handler:Function):DOMMaLi`**\u003cbr\u003ebehaves like `once(anchoredEvent,Handler)`, but automatically unregisters the given `Handler` upon its first invocation\n* **`once (Events:string, Selector:string|String|null, Handler:Function):DOMMaLi`**\u003cbr\u003ebehaves like `once(Events,Selector,Handler)`, but automatically unregisters the given `Handler` upon its first invocation\n* **`once (anchoredEvent:string, Data:any, Handler:Function):DOMMaLi`**\u003cbr\u003ebehaves like `once(anchoredEvent,Data,Handler)`, but automatically unregisters the given `Handler` upon its first invocation\n* **`once (Events:string, Selector:string|String|null, Data:any, Handler:Function):DOMMaLi`**\u003cbr\u003ebehaves like `once(Events,Selector,Data,Handler)`, but automatically unregisters the given `Handler` upon its first invocation\u003cbr\u003e\u0026nbsp;\n* \u003ca name=\"off\"\u003e\u003c/a\u003e**`off ():DOMMaLi`**\u003cbr\u003eunregisters all event handlers registered in all DOM elements represented by this `dommali` object\n* **`off (anchoredEvent:string):DOMMaLi`**\u003cbr\u003eunregisters all event handlers registered for the given `anchoredEvent` in all DOM elements represented by this `dommali` object\n* **`off (Events:string):DOMMaLi`**\u003cbr\u003eunregisters all event handlers registered for every event in the (space-separated) list given by `Events` in all DOM elements represented by this `dommali` object\n* **`off (Events:string, Selector:string|String|null):DOMMaLi`**\u003cbr\u003eunregisters all event handlers registered as delegated event handlers with CSS selector `Selector` for every event in the (space-separated) list given by `Events` in all DOM elements represented by this `dommali` object\n* **`off (anchoredEvent:string, Handler:Function):DOMMaLi`**\u003cbr\u003eunregisters the given `Handler` registered for the given `anchoredEvent` in all DOM elements represented by this `dommali` object\n* **`off (Events:string, Selector:string|String|null, Handler:Function):DOMMaLi`**\u003cbr\u003eunregisters the given `Handler` registered as delegated event handler with CSS selector `Selector` for every event in the (space-separated) list given by `Events` in all DOM elements represented by this `dommali` object\u003cbr\u003e\u0026nbsp;\n* \u003ca name=\"repeatUntil\"\u003e\u003c/a\u003e**`repeatUntil (...anchoredEventsOrTimeoutOrLoopBody:(string|number|Function)[]):Promise\u003cany\u003e`**\u003cbr\u003ereturns a promise which resolves after one of the given `anchoredEvents` has been received or the number of milliseconds given by a `Timeout` have passed. Until then, the given (asynchronous) `LoopBody` function will be executed as often as possible. If `LoopBody` returns any other value but `undefined`, the loop is terminated and the promise resolves to the loop body's return value. After receiving an event, `repeatUntil` resolves to that event as soon as `LoopBody` has finished; in case of a timeout it resolves to the actual number of milliseconds that have passed since the initial invocation (this number is usually slightly higher than the specified timeout) - but again, only after `LoopBody` has finished. All arguments except `LoopBody` are optional - calling `repeatUntil` solely with a `LoopBody` simply repeatedly executes that function until it returns a value different from `undefined` (see \u003ca href=\"#NotesOnRepeatUntil\"\u003eNotes on `repeatUntil`\u003c/a\u003e)\n* \u003ca name=\"trigger\"\u003e\u003c/a\u003e**`trigger (Event:string|Event, extraParameters?:any[]):boolean`**\u003cbr\u003efires the given `Event` on all DOM elements represented by this `dommali` object. If `Event` is given as a string, a `CustomEvent` of type `Event` is created and fired. The optional argument `extraParameters` may be a single value or a list of values which are passed as additional arguments (after the event object itself) to the Handler. `trigger` returns `false` if at least one of the invoked event handlers called `Event.preventDefault()` or `true` otherwise\n* \u003ca name=\"waitFor\"\u003e\u003c/a\u003e**`waitFor (...anchoredEventsOrTimeout:(string|number)[]):Promise\u003cany\u003e`**\u003cbr\u003ereturns a promise which resolves as soon as one of the given `anchoredEvents` has been received or the number of milliseconds given by a `Timeout` have passed. All arguments are optional - calling `waitFor` without any arguments just resolves immediately. After receiving an event, `waitFor` resolves to that event; in case of a timeout it resolves to the actual number of milliseconds that have passed since the initial invocation (this number is usually slightly higher than the specified timeout) (see \u003ca href=\"#NotesOnWaitFor\"\u003eNotes on `waitFor`\u003c/a\u003e)\n\n### Focus Handling ###\n\n* \u003ca name=\"focus\"\u003e\u003c/a\u003e**`focus ():DOMMaLi`**\u003cbr\u003egrants the keyboard focus to the first DOM element represented by this `dommali` object - provided that this is an **HTML element** and is allowed to be focused. Otherwise, `focus` does nothing\n* \u003ca name=\"blur\"\u003e\u003c/a\u003e**`blur ():DOMMaLi`**\u003cbr\u003eremoves the keyboard focus from the first DOM element represented by this `dommali` object - provided that this is an **HTML element** and is currently focused. Otherwise, `blur` does nothing\n* \u003ca name=\"hasFocus\"\u003e\u003c/a\u003e**`hasFocus ():boolean`**\u003cbr\u003ereturns `true`, if the first DOM element represented by this `dommali` object currently owns the keyboard focus - or `false` otherwise\n* \u003ca name=\"focusedElement\"\u003e\u003c/a\u003e**`focusedElement ():DOMMaLi`**\u003cbr\u003ereturns a (possible empty) `dommali` object representing the DOM element which currently owns the keyboard focus\n\n### CSS Transitions ###\n\n* \u003ca name=\"transition\"\u003e\u003c/a\u003e**`transition (Settings:PlainObject, Options?:PlainObject):DOMMaLi`**\u003cbr\u003edefines a CSS transition (as specified by the optional `Options`) for all CSS properties given by the keys of `Settings` and all **HTML elements** represented by this `dommali` object and starts this transition by setting every CSS property to the value given in `Settings`. Options may customize the transition with a `duration` (in ms), an initial `delay` (in ms) and/or an [`easing` function](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). Additionally, a `cleanup` option may be defined which, if `true`, restores the transition settings at the end of a transition to their values before invoking this method\n\n## Notes on dommali Event Handling ##\n\n`dommali` contains additional support for simplified and streamlined event handling.\n\n\u003e Nota bene: \u003ca href=\"#waitFor\"\u003e`waitFor`\u003c/a\u003e and \u003ca href=\"#repeatUntil\"\u003e`repeatUntil`\u003c/a\u003e were inspired by [_hyperscript](https://github.com/bigskysoftware/_hyperscript)\n\n### \u003ca name=\"NotesOnAnchoredEvents\"\u003eAnchored Events\u003c/a\u003e ####\n\nBoth event handler management functions and \u003ca href=\"#waitFor\"\u003e`waitFor`\u003c/a\u003e or \u003ca href=\"#repeatUntil\"\u003e`repeatUntil`\u003c/a\u003e support \"anchored events\", i.e., event names followed by a CSS selector which restricts the events to be handled to those triggered on specific elements only. JQuery (and its look-alikes) support this declaration of \"delegated event handlers\" by means of an additional \"selector\" argument to functions like `on`, `once` or `off` - `dommali` additionally allows event name and event target selector to be specified within a single string argument just by separating them with an \"at\"-character `@`:\n\n\u0026nbsp; \"\u003ci\u003eevent-name\u003c/i\u003e\u003cb\u003e@\u003c/b\u003e\u003ci\u003eselector\u003c/i\u003e\"\n\nFor this to become possible, however, in `dommali` the syntax of event names has been narrowed a bit: while HTML actually allows event names in almost any format (including spaces and control characters), `dommali` defines the following syntax rules:\n\nEvent names\n\n* have to start with a roman letter (a-z), a dollar sign or an underscore, optionally followed by one or multiple decimal digits (0-9), roman letters (a-z), dollar signs or underscores\n* optionally followed by one or multiple groups of a single hyphen, dot or colon followed by one or multiple decimal digits (0-9), roman letters (a-z), dollar signs or underscores\n\nThe corresponding JavaScript RegExp is `/^[a-z$_][a-z$_0-9]*([-.:][a-z$_0-9]+)*@.*$/`\n\nIn an \"anchored event\" specification, this event name is followed by an \"at\" sign and one or multiple CSS selectors. The special \"selector\" `this` restricts incoming events to those triggered at the listening element itself. Typical examples look like:\n\n* `pointerdown@.draggable` or\n* `pointermove@this`\n\n### \u003ca name=\"NotesOnWaitFor\"\u003ewaitFor\u003c/a\u003e ###\n\n`waitFor (...anchoredEventsOrTimeout:(string|number)[])` returns a promise which resolves as soon as one of the given `anchoredEvents` has been received or the number of milliseconds given by a `Timeout` have passed.\n\n`waitFor` has to be invoked as a method on a `dommali` object as it dynamically registers and unregisters event handlers on its DOM elements.\n\nIn an asynchronous function, `waitFor` is a simple approach to wait for the arrival of an event (as shown in the following example):\n\n```\nconst $ = dommali // make \"dommali\" calls look like \"jQuery\" ones\n$(document.body).waitFor('mousedown','pointerdown',5000).then((Result) =\u003e {\n  switch (true) {\n    case typeof Result === 'number':  ... (handle timeout)\n    case Result.type === 'mousedown': ... (handle 'mousedown')\n    default:                          ... (handle 'pointerdown')\n  }\n})\n```\n\n### \u003ca name=\"NotesOnRepeatUntil\"\u003erepeatUntil\u003c/a\u003e ###\n\n`repeatUntil (...anchoredEventsOrTimeoutOrLoopBody:(string|number|Function)[])` returns a promise which resolves after one of the given `anchoredEvents` has been received or the number of milliseconds given by a `Timeout` have passed. Until then, the given (asynchronous) `LoopBody` function will be executed as often as possible. If `LoopBody` returns any other value but `undefined`, the loop is terminated and the promise resolves to the loop body's return value. After receiving an event, `repeatUntil` resolves to that event as soon as `LoopBody` has finished without any return value; in case of a timeout it resolves to the actual number of milliseconds that have passed since the initial invocation - but again, only after `LoopBody` has finished without any return value.\n\n`repeatUntil` has to be invoked as a method on a `dommali` object as it dynamically registers and unregisters event handlers on its DOM elements.\n\nIn an asynchronous function, `repeatUntil` may be used to simplify the proper handling of multiple consecutively arriving events. For example, the following code snippet makes all DOM elements with CSS class `draggable` draggable within their parent:\n\n```\nconst $ = dommali // make \"dommali\" calls look like \"jQuery\" ones\n$(document.body).on('pointerdown@.draggable',async function (Event) { // invocation-specific \"this\"\n  if (Event.button !== 0) { return }\n\n  let $Draggable = $(Event.target)\n  let $Container = $Draggable.parent()\n\n  let OffsetX = Event.offsetX + $Container.positionOnPage().left\n  let OffsetY = Event.offsetY + $Container.positionOnPage().top\n\n  let PointerId = Event.pointerId\n  this.subject(0).setPointerCapture(PointerId)\n    let Result = await this.repeatUntil('pointerup', 5000, async () =\u003e { // closure \"this\"\n      Event = await this.waitFor('pointermove','pointerup')\n      if (Event.type === 'pointermove') {\n        $Draggable.css({ left:(Event.pageX-OffsetX)+'px', top:(Event.pageY-OffsetY)+'px' })\n      }\n    })\n  this.subject(0).releasePointerCapture(PointerId)\n})\n```\n\n(please note the use of both `function` and \"fat-arrow\" literals because of the desired `this` handling)\n\n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/dommali/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fdommali","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fdommali","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fdommali/lists"}