dom

MMO.core.dom · 72 symbols · generated 30 Sep 2026

constant

BOOL_ATTRIBUTES

dom.js:9

MMO.core.dom.BOOL_ATTRIBUTES = ['disabled', 'readonly', 'required', 'checked'];

Namespace: MMO.core.dom

constant

MERGEABLE_NODES

dom.js:11

MMO.core.dom.MERGEABLE_NODES = ['A', 'ABBR', 'AREA', 'AUDIO', 'B', 'BDI', 'BDO', 'BR', 'BUTTON', 'CANVAS', 'CITE', 'CODE', 'DATA', 'DATALIST', 'DEL', 'DFN', 'EM', 'EMBED', 'I', 'IFRAME', 'IMG', 'INPUT', 'INS', 'KBD', 'LABEL', 'MARK', 'MATH', 'METER', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'OBJECT', 'OUTPUT', 'PICTURE', 'PROGRESS', 'Q', 'RUBY', 'S', 'SAMP', 'SCRIPT', 'SELECT', 'SLOT', 'SMALL', 'SPAN', 'STRONG', 'SUB', 'SUP', 'SVG', 'TEMPLATE', 'TEXTAREA', 'TIME', 'U', 'VAR', 'VIDEO', 'WBR'];

Namespace: MMO.core.dom

function

$

dom.js:22

Call query selector.

function MMO.core.dom.$(node, root = null, searchParent = true)

Namespace: MMO.core.dom

Root is used to select elements into a shadowdom

node	`Element` \| `string`
root = null	`Element`	a node use as reference to get root document or shadowroot from.
searchParent = true	`Boolean`	if root is defined but no element are found, search in the document
returns	`Element` \| `null`

function

$$

dom.js:45

Call query selectorAll

function MMO.core.dom.$$(selector, root = null, searchSlot = true)

Namespace: MMO.core.dom

selector
root = null	`Element`	a node use as reference to get root document or shadowroot from.
searchSlot = true	`Boolean`	if root is a shadow root, search in the slot
returns	`Array`

function

loopInputs

dom.js:76

Yield every form control inside a node, recursively.

function* MMO.core.dom.loopInputs(node)

Namespace: MMO.core.dom
See: MMO.core.dom.readonly disables checkboxes and radios. Testing the element type as well is what makes readonly(node, false) able to find them again.

NOTE: `willValidate` alone is not enough: it is false for a DISABLED control, and

node Node

function

readonly

dom.js:92

Make every form control inside a node read-only, or writable again.

function MMO.core.dom.readonly(node, value)

Namespace: MMO.core.dom

Checkboxes and radios have no `readonly` state of their own, so they are disabled instead.

node	`Node`
value	`boolean`	true to lock, false to unlock

function

createElement

dom.js:121

Create a dom element from a configuration

function MMO.core.dom.createElement(node, attrs = null, ...children)

Namespace: MMO.core.dom

node
attrs = null	`Array` \| `Function` \| `object`	: - an object of attributes to set ({key: value}) - a Function(element) that returns an object - an Array of the above
...children	`...*`	`MMO.core.dom.appendChildren`. A string is TEXT, never markup: a file's name shows as it was typed. Markup you wrote goes through `MMO.core.dom.html`
returns	`Node`

MMO.core.dom.createElement('li', {class: 'file'}, MMO.core.dom.createElement('mmo-icon', {name: 'file'}), file.name)

function

createElementNS

dom.js:139

function MMO.core.dom.createElementNS(namespace, tag, attrs = null, ...children)

Namespace: MMO.core.dom
See: MMO.core.dom.createElement in an explicit xml namespace (svg, MathML, ...).

namespace	`string`	`MMO.core.dom.NAMESPACE_URIS`
tag	`string`
attrs = null	`?(Object` \| `Function` \| `Array)`
...children	`...*`	`MMO.core.dom.appendChildren`: a string is text
returns	`Element`

function

dispatchEvent

dom.js:150

Create a custom event and dispatch it

function MMO.core.dom.dispatchEvent(node, name, detail = undefined, cancelable = true, bubbles = true)

Namespace: MMO.core.dom

node	`Element`
name	`string`	Event's name
detail = undefined	`object`	user defined detail to pass to the handlers
cancelable = true
bubbles = true
returns	`bool`	false if at least one handler call preventDefault

function

loopTextNodes

dom.js:161

Loop through all text nodes inside a node

function* MMO.core.dom.loopTextNodes(node)

Namespace: MMO.core.dom

node	`Node`	the node to use
returns	`Generator<Text>`

function

getTextNodes

dom.js:174

function MMO.core.dom.getTextNodes(node)

Namespace: MMO.core.dom

node	`Node`
returns	`Array<Text>`	every text node inside, in document order

function

firstTextNode

dom.js:182

function MMO.core.dom.firstTextNode(node)

Namespace: MMO.core.dom

node	`Node`
returns	`?Text`	the first text node inside, null when there is none

function

isMergeableNode

dom.js:194

Tells if two nodes can be merged: they have the same type and the same attributes and they are part of the list MMO.core.dom.MERGEABLE_NODES or they are Text nodes

function MMO.core.dom.isMergeableNode(a, b)

Namespace: MMO.core.dom

a
b

function

normalize

dom.js:213

Merge child nodes if they are mergeable

function MMO.core.dom.normalize(node)

Namespace: MMO.core.dom

node Element

function

createScript

dom.js:267

Create script

function MMO.core.dom.createScript(url, inline = false)

Namespace: MMO.core.dom

url	`string`	the script url or the script text
inline = false	`boolean`	if true, url should be the script text
returns	`Script`	the added script

function

includeScript

asyncdom.js:296

Include script in html <head> or in a node

async function MMO.core.dom.includeScript(url, inline = false, parentNode = null)

Namespace: MMO.core.dom

url	`string`	the script url. if it starts with ':', it is resolved with `MMO.url`
inline = false	`boolean`	if true, url should be the script text
parentNode = null
returns	`ScriptElement`	the added script

function

createStyle

dom.js:332

Create style

function MMO.core.dom.createStyle(url, inline = false)

Namespace: MMO.core.dom

url	`string`	the style url
inline = false	`boolean`	if true, url should be the style text
returns	`style`	the added style

function

includeStyle

dom.js:352

Include style in html <head> or in a node

function MMO.core.dom.includeStyle(url, inline = false, parentNode = null)

Namespace: MMO.core.dom

url	`string`	the style url. if it starts with ':', it is resolved with `MMO.url`
inline = false	`boolean`	if true, url should be the style text
parentNode = null
returns	`StyleElement`	the added style

function

getFocusableElements

dom.js:365

function MMO.core.dom.getFocusableElements(node = null)

Namespace: MMO.core.dom

node = null

function

getPreviousFocus

dom.js:374

The focusable element sitting just before a node in the document's tab order.

function MMO.core.dom.getPreviousFocus(node)

Namespace: MMO.core.dom

node	`Element`
returns	`?Element`	null when the node is the first one, or is not focusable itself

function

getNextFocus

dom.js:389

The focusable element sitting just after a node in the document's tab order.

function MMO.core.dom.getNextFocus(node)

Namespace: MMO.core.dom

node	`Element`
returns	`?Element`	the LAST focusable element when the node is last, or is not focusable

function

scrollIntoView

dom.js:406

Open all the details containing a node

function MMO.core.dom.scrollIntoView(node)

Namespace: MMO.core.dom

node	`Element`	[description]
returns	`[type]`	[description]

function

getMouseEventCaretRange

dom.js:423

Get the text position a pointer event landed on, across the three browser apis.

function MMO.core.dom.getMouseEventCaretRange(evt)

Namespace: MMO.core.dom

evt	`MouseEvent`
returns	`?Range`	a collapsed range, or undefined when no api is available

function

selectRange

dom.js:450

function MMO.core.dom.selectRange(range)

Namespace: MMO.core.dom

range

function

loopRangeNodes

dom.js:461

Yield node selected in a range

function* MMO.core.dom.loopRangeNodes(range)

Namespace: MMO.core.dom

range
returns	`Generator<[Node node, ?number startOffset, ?number endOffset)>`

function

getRangeNodes

dom.js:499

function MMO.core.dom.getRangeNodes(range)

Namespace: MMO.core.dom

range	`Range`
returns	`Array<[Node, ?number, ?number]>`	`MMO.core.dom.loopRangeNodes`

function

firstNodeInRange

dom.js:507

function MMO.core.dom.firstNodeInRange(range)

Namespace: MMO.core.dom

range	`Range`
returns	`?Node`	the first node the range touches

function

isWrapped

dom.js:521

Check if first text element in a node is wrapped in a tag

function MMO.core.dom.isWrapped(node, tagName, attrs = null)

Namespace: MMO.core.dom

node	`Node`
tagName	`string`
attrs = null	`object` \| `null`	if specified, check all attributes are set to the given values
returns	`boolean`

function

toggleRangeTextWrapping

dom.js:533

Toggle wrapping text content in a selection.

function MMO.core.dom.toggleRangeTextWrapping(range, tagName, attrs = null)

Namespace: MMO.core.dom

Example toggle bold/italic/underline in a selection

range
tagName
attrs = null	`object` \| `null`	if specified, apply attributes to the wrapper

function

setAttributes

dom.js:620

Set element attributes

function MMO.core.dom.setAttributes(node, attrs)

Namespace: MMO.core.dom

node
attrs	`array` \| `Function` \| `Object`	- Function: function(node): value - Object: set the attributes with key,value - array: a list of the above
returns	`void`

function

hasAttributes

dom.js:638

Test if element has the given attribute's values

function MMO.core.dom.hasAttributes(node, attrs, full = false)

Namespace: MMO.core.dom

node	`Element`
attrs	`object`
full = false	`boolean`	if true, check that the node has only and all the given attributes
returns	`boolean`

function

setAttribute

dom.js:655

Set element attribute

function MMO.core.dom.setAttribute(node, name, value)

Namespace: MMO.core.dom

node
name	`string`	the attribute's name
value	`string` \| `Function`	- Function: calls is with element as only argument
returns	`void`

function

getAttributes

dom.js:771

Get element attributes as an object

function MMO.core.dom.getAttributes(node)

Namespace: MMO.core.dom

node	`Element`
returns	`Object`

function

root

dom.js:787

Get root HTML

function MMO.core.dom.root(node)

Namespace: MMO.core.dom

node	`Node`
returns	`Node`

function

host

dom.js:799

The custom element owning the shadow root a node lives in.

function MMO.core.dom.host(node)

Namespace: MMO.core.dom

node	`Node`
returns	`?Element`	null when the node is not inside a shadow root

function

parentElement

dom.js:809

The parent element, crossing a shadow boundary to the host rather than stopping at it.

function MMO.core.dom.parentElement(node)

Namespace: MMO.core.dom

node	`Node`
returns	`?Node`

function

body

dom.js:818

function MMO.core.dom.body(node)

Namespace: MMO.core.dom

node	`Node`
returns	`HTMLElement`	the body of the document the node belongs to

function

hasParent

dom.js:829

Test whether a node descends from another.

function MMO.core.dom.hasParent(node, parent, max = false)

Namespace: MMO.core.dom

node	`Node`
parent	`Node`
max = false	`number` \| `false`	stop after this many levels
returns	`boolean`	false when node === parent: only ancestors count

function

closestParent

dom.js:844

Walk up until a node carries a given tag name. The node itself is a candidate.

function MMO.core.dom.closestParent(node, tagName)

Namespace: MMO.core.dom

NOTE: this does NOT cross shadow boundaries.

node	`Node`
tagName	`string`	case insensitive
returns	`?Element`

function

remove

dom.js:857

Detach a node, or every node of a NodeList.

function MMO.core.dom.remove(node)

Namespace: MMO.core.dom

node	`?(Node` \| `NodeList)`
returns	`boolean`	false when there was nothing attached to remove

function

html

dom.js:883

Mark markup to be parsed by the functions building nodes from children (MMO.core.dom.appendChildren,

function MMO.core.dom.html(html)

Namespace: MMO.core.dom
See: MMO.core.dom.createElement, MMO.core.Template#add), which insert a plain string as text.

Only for markup you wrote, or sanitized: it is parsed with `innerHTML`, so an `<img onerror>` in it runs. Never wrap a name, a label or a message that came from a user or an api. An array has each of its strings marked; anything else (a node, null...) is returned as it is, so a value that may be a node or a string of markup can be handed over either way.

html	`*`
returns	`*`	a `MMO.core.dom.Html` for a string

MMO.core.dom.createElement('p', {}, MMO.core.dom.html('Saved in '), folder.name)

function

loopAppendChildren

dom.js:910

Add children to a node using a generator

function* MMO.core.dom.loopAppendChildren(node, ...children)

Namespace: MMO.core.dom

node	`Element`	the node in which to add children
...children	`...*`	`MMO.core.dom.appendChildren`
returns	`Generator<Node>`

function

appendChildren

dom.js:970

Add children to a node.

function MMO.core.dom.appendChildren(node, ...children)

Namespace: MMO.core.dom

A string -- or a number, or anything that is not a node -- is inserted as TEXT, never parsed: a name or a message shows as it was typed, `` included, and runs nothing. Markup goes through `MMO.core.dom.html`, and only markup you wrote or sanitized.

node	`Element`	the node in which to add children
...children	`...*`	each one can be: - a Node, a NodeList, a DocumentFragment, or a <template> (its content is cloned) - `MMO.core.dom.html('...')`: markup, parsed - an array, or a MMO.core.Map list, of any of these - null or undefined: skipped, and so is an empty string - anything else: its text
returns	`Array<Node>`

MMO.core.dom.appendChildren(li, icon, file.name, MMO.core.dom.html(' (new)'))

function

removeChildren

dom.js:978

Detach a list of nodes, flattening nested arrays and skipping null entries.

function MMO.core.dom.removeChildren(...children)

Namespace: MMO.core.dom

...children ...(?Node | Array)

function

addHTML

dom.js:998

Parse html and add it to a node.

function MMO.core.dom.addHTML(node, html)

Namespace: MMO.core.dom

The markup runs: only hand it what you wrote or sanitized. Text goes through `MMO.core.dom.appendChildren`.

node	`Element`
html	`string`
returns	`Array<Node>`	the nodes parsed, in order

function

insertNodeInText

dom.js:1016

Insert an Element inside a text element

function MMO.core.dom.insertNodeInText(text, node, offset, size = 0)

Namespace: MMO.core.dom

text	`Text`
node	`Element`	[description]
offset	`Number`	the offset to insert the element at
size = 0	`Number`	the size to remove after offset (replaced by the element)

function

insertAfter

dom.js:1031

Insert a node just after another one.

function MMO.core.dom.insertAfter(node, ref)

Namespace: MMO.core.dom

node	`Node`	the node to insert
ref	`Node`	the node to insert after
returns	`Node`	the inserted node

function

fixedNode

dom.js:1041

Get the Element from which a fixed element has his position computed. If null, it is the viewport.

function MMO.core.dom.fixedNode(node)

Namespace: MMO.core.dom

Fixed element are computed from a stack context. CSS 'transform', 'filter', 'position: fixed' and 'position: sticky' create new stack context.

node
returns

function

getComputedStyle

dom.js:1057

function MMO.core.dom.getComputedStyle(node, property = null, pseudo = null)

Namespace: MMO.core.dom

node
property = null
pseudo = null

function

copyStyles

dom.js:1069

Copy every COMPUTED style of a node onto another as inline styles, so the copy keeps its look once detached from the stylesheets that produced it.

function MMO.core.dom.copyStyles(nodeA, nodeB, pseudo = null)

Namespace: MMO.core.dom

nodeA	`Element`	the source
nodeB	`Element`	the target
pseudo = null	`?string`	read a pseudo element of the source instead (':before', ...)

function

getEmValue

dom.js:1088

Get the node's font-size in pixels (the value 1em resolves to).

function MMO.core.dom.getEmValue(node)

Namespace: MMO.core.dom

node	`Element`
returns	`number`

function

getComputedStyleValue

dom.js:1100

Get a computed style and convert it to a number (interpreting the unit)

function MMO.core.dom.getComputedStyleValue(node, property, pseudo = null)

Namespace: MMO.core.dom

node	`[type]`	[description]
property	`[type]`	[description]
pseudo = null	`[type]`	[description]
returns	`[type]`	[description]

function

decodeUnit

dom.js:1112

Convert any css string value into a float

function MMO.core.dom.decodeUnit(node, value, em = null, percent = 1)

Namespace: MMO.core.dom

node
value	`*`	any value if string will try to read the unit and convert into a float
em = null	`number`	if value is em, will use this value as reference
percent = 1	`number`	if value is percent, will use this value as reference
returns	`number` \| `string`	if value is a percent value, returns a string version of the number

function

encodeUnit

dom.js:1139

Make sure a value is a properly formed css value with the correct unit

function MMO.core.dom.encodeUnit(node, value = 0, unit = null, percent = 1)

Namespace: MMO.core.dom

node
value = 0	`string` \| `number`	[description]
unit = null	`string` \| `number` \| `null`	('px','em','rem') unit to use by default, or another value. In that case, unit is percent
percent = 1
returns	`string`

function

setStyles

dom.js:1172

Set css styles

function MMO.core.dom.setStyles(node, styles)

Namespace: MMO.core.dom

node
styles

function

setStyle

dom.js:1183

Queue style update in animation frame

function MMO.core.dom.setStyle(node, key, value)

Namespace: MMO.core.dom

node	`Element`
key	`string`	style name
value	`*`	style value

function

updateStyles

dom.js:1206

Update queue styles in given node

function MMO.core.dom.updateStyles(node)

Namespace: MMO.core.dom

node	`Element`
returns	`void`

function

getStyle

dom.js:1220

Set css styles

function MMO.core.dom.getStyle(node, key)

Namespace: MMO.core.dom

node
key

function

getCoord

dom.js:1232

Get the element's absolute coordinates (left, top) using offset and scroll

function MMO.core.dom.getCoord(node, root = null)

Namespace: MMO.core.dom

node
root = null
returns	`x: number, y: number`	}

function

getBoundingRect

dom.js:1258

Get bounding rect relative to a parent

function MMO.core.dom.getBoundingRect(node, parent = false)

Namespace: MMO.core.dom

node
parent = false	`Element` \| `boolean`	if true, use direct parent. if false get absolute bounding rect
returns	`x,y,width,height`	}

function

makeRelative

dom.js:1294

Convert an absolute document point into one relative to a node's box.

function MMO.core.dom.makeRelative(node, pt, copyPt = true)

Namespace: MMO.core.dom

node	`Element`
pt
copyPt = true	`boolean`	carry the point's other properties over to the result
returns	`x: number, y: number`	} a new object; `pt` is never modified

function

ptInside

dom.js:1309

Tells if a point is inside a container

function MMO.core.dom.ptInside(node, x, y)

Namespace: MMO.core.dom

node
x
y

function

isVisible

dom.js:1324

Check if element is visible

function MMO.core.dom.isVisible(elem)

Namespace: MMO.core.dom

elem	`Element`
returns	`Boolean`

function

waitUntilVisible

dom.js:1363

Get a promise waiting for an element to become visible

function MMO.core.dom.waitUntilVisible(node, opts)

Namespace: MMO.core.dom

node	`Element`	to watch
opts	`Object`	the options to pass to the IntersectionObserver
returns	`Promise<IntersectionObserverEntry>`

function

setBoundingRect

dom.js:1383

function MMO.core.dom.setBoundingRect(node, rect)

Namespace: MMO.core.dom

node
rect

function

setOffset

dom.js:1394

Set the current offset of the element

function MMO.core.dom.setOffset(node, x, y = null)

Namespace: MMO.core.dom

node
x
y = null	`null` \| `number`	[description]
returns	`MMO.core.Element`	this

function

addOffset

dom.js:1405

Move the element

function MMO.core.dom.addOffset(node, x, y)

Namespace: MMO.core.dom

node
x
y

function

setSize

dom.js:1422

Set a node's width and height, queued like every other style write.

function MMO.core.dom.setSize(node, w, h)

Namespace: MMO.core.dom

A negative value is clamped to 0, and a falsy one clears the style.

node	`Element`
w
h	`number=`	the height, when `w` is a number

function

getCSSPath

dom.js:1444

Get a unique css selector for a node It is usefull to have a visual path for a node, but it should not be used to retrieve the node. Use getPath instead.

function MMO.core.dom.getCSSPath(node, root = null)

Namespace: MMO.core.dom

node	`Node`
root = null	`Node`	the root node to get path from. If null, use document body
returns	`string`

function

getPath

dom.js:1477

Get a unique path for node as indexes in childnodes WARNING: the path is reversed, so iteration starts from length-1 and not 0

function MMO.core.dom.getPath(node, root = null)

Namespace: MMO.core.dom

node	`Node`
root = null	`Node`	the root node to get path from. If null, use document body
returns	`string`	false if the root node was not found

function

at

dom.js:1496

Get a node from its path

function MMO.core.dom.at(node, path)

Namespace: MMO.core.dom

node	`Node`
path	`string`	the return value of (`MMO.core.dom.getPath()`)
returns	`Node`

function

onIndeterminateClick

dom.js:1516

This function allow a checkbox to cycle through 3 states: checked, unchecked, indeterminate.

function MMO.core.dom.onIndeterminateClick(event)

Namespace: MMO.core.dom

It is meant to be used in the onclick attribute: `<input type="checkbox" onclick="MMO.core.dom.onIndeterminateClick(event)" />`

event