Monster/DOM

Monster/DOM

Author:
  • schukai GmbH

Classes

Assembler
CustomElement
Template
Theme
Updater

Members

Type:
  • string
Since:
  • 1.9.0

# (static, constant) ATTRIBUTE_OPTIONS :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_PREFIX :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_THEME_NAME :string

Type:
  • string

# (static, constant) ATTRIBUTE_THEME_PREFIX :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_ATTRIBUTES :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_BIND :string

Type:
  • string
Since:
  • 1.9.0

# (static, constant) ATTRIBUTE_UPDATER_INSERT :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_INSERT_REFERENCE :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_REMOVE :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTE_UPDATER_REPLACE :string

Type:
  • string
Since:
  • 1.8.0

# (static, constant) ATTRIBUTEPREFIX :string

attribute prefix

Type:
  • string

# (static, constant) DEFAULT_THEME :string

default theme

Type:
  • string
Type:
  • string
Since:
  • 1.10.0
Type:
  • string
Since:
  • 1.10.0

Methods

# (static) addAttributeToken(element, key, token) → {HTMLElement}

this method can be used to add a token to an attribute. Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.addAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.addAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {addAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
addAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

You can call the method via the monster namespace new Monster.DOM.addToObjectLink().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.addToObjectLink();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {addToObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
addToObjectLink();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
object Object
Since:
  • 1.9.0
Returns:
Type
boolean

# (static) clearAttributeTokens(element, key) → {HTMLElement}

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.clearAttributeTokens().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.clearAttributeTokens();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {clearAttributeTokens} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
clearAttributeTokens();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

# (static) containsAttributeToken(element, key, token) → {boolean}

This method can be used to determine whether an attribute has a token.

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.containsAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.containsAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {containsAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
containsAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
boolean

get the closest object link of a node

if a node is specified without a object link, a recursive search upwards is performed until the corresponding object link is found, or undefined is returned.

you can call the method via the monster namespace Monster.DOM.getUpdaterFromNode().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/updater.js';
console.log(Monster.DOM.findClosestObjectLink())
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {getUpdaterFromNode} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/updater.js';
console.log(findClosestObjectLink())
</script>
Parameters:
Name Type Description
node Node
Since:
  • 1.10.0
Throws:

value is not an instance of Node

Type
TypeError
Returns:
Type
Node | undefined

# (static) findDocumentTemplate(id, root) → {Template}

you can call the method via the monster namespace Monster.DOM.findDocumentTemplate().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/template.js';
console.log(Monster.DOM.findDocumentTemplate())
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/template.js';
console.log(findDocumentTemplate())
</script>
Parameters:
Name Type Description
id string
root Node
Since:
  • 1.7.0
Throws:
  • template id not found.

    Type
    Error
  • value is not a string

    Type
    TypeError
Returns:
Type
Template

# (static) fireEvent(element, type) → {void}

You can call the method via the monster namespace new Monster.DOM.fireEvent().

<script type="module">
import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/events.js';
console.log(new Monster.DOM.fireEvent())
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/events.js';
console.log(fireEvent())
</script>
Parameters:
Name Type Description
element HTMLElement | HTMLCollection | NodeList
type string
Since:
  • 1.10.0
Throws:

value is not an instance of HTMLElement or HTMLCollection

Type
TypeError
Returns:
Type
void

# (static) getDocument() → {object}

this method fetches the document object

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/util.js';
console.log(Monster.DOM.getDocument())
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/util.js';
console.log(getDocument())
</script>

in nodejs this functionality can be performed with jsdom.

import {JSDOM} from "jsdom"
if (typeof window !== "object") {
   const {window} = new JSDOM('', {
       url: 'http://example.com/',
       pretendToBeVisual: true
   });

   [
       'self',
       'document',
       'Document',
       'Node',
       'Element',
       'HTMLElement',
       'DocumentFragment',
       'DOMParser',
       'XMLSerializer',
       'NodeFilter',
       'InputEvent',
       'CustomEvent'
   ].forEach(key => (getGlobal()[key] = window[key]));
}
Since:
  • 1.6.0
Throws:

not supported environment

Type
Error
Returns:
Type
object

# (static) getDocumentFragmentFromString() → {DocumentFragment}

this method fetches the document object

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/util.js';
console.log(Monster.DOM.getDocumentFragmentFromString())
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/util.js';
console.log(getDocumentFragmentFromString('<div></div>'))
</script>

in nodejs this functionality can be performed with jsdom.

import {JSDOM} from "jsdom"
if (typeof window !== "object") {
   const {window} = new JSDOM('', {
       url: 'http://example.com/',
       pretendToBeVisual: true
   });

   [
       'self',
       'document',
       'Document',
       'Node',
       'Element',
       'HTMLElement',
       'DocumentFragment',
       'DOMParser',
       'XMLSerializer',
       'NodeFilter',
       'InputEvent',
       'CustomEvent'
   ].forEach(key => (getGlobal()[key] = window[key]));
}
Since:
  • 1.6.0
Throws:
  • not supported environment

    Type
    Error
  • value is not a string

    Type
    TypeError
Returns:
Type
DocumentFragment

# (static) getLinkedObjects(element, symbol) → {Iterator}

The ObjectLink can be used to attach objects to HTMLElements. The elements are kept in a set under a unique symbol and can be read via an iterator {@see getLinkedObjects}.

In addition, elements with an objectLink receive the attribute data-monster-objectlink.

With the method {@see addToObjectLink} the objects can be added.

You can call the method via the monster namespace new Monster.DOM.getLinkedObjects().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.getLinkedObjects();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {getLinkedObjects} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
getLinkedObjects();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
Since:
  • 1.9.0
Throws:

there is no object link for symbol

Type
Error
Returns:
Type
Iterator

# (static) getWindow() → {object}

this method fetches the window object

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/util.js';
console.log(Monster.DOM.getWindow())
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/util.js';
console.log(getWindow(null))
</script>

in nodejs this functionality can be performed with jsdom.

import {JSDOM} from "jsdom"
if (typeof window !== "object") {
   const {window} = new JSDOM('', {
       url: 'http://example.com/',
       pretendToBeVisual: true
   });

   getGlobal()['window']=window;

   [
       'self',
       'document',
       'Document',
       'Node',
       'Element',
       'HTMLElement',
       'DocumentFragment',
       'DOMParser',
       'XMLSerializer',
       'NodeFilter',
       'InputEvent',
       'CustomEvent'
   ].forEach(key => (getGlobal()[key] = window[key]));
}
Since:
  • 1.6.0
Throws:

not supported environment

Type
Error
Returns:
Type
object

You can call the method via the monster namespace new Monster.DOM.hasObjectLink().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.hasObjectLink();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {hasObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
hasObjectLink();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
Since:
  • 1.9.0
Returns:
Type
boolean

# (static) registerCustomElement(element) → {void}

This method registers a new element. The string returned by CustomElement.getTag() is used as the tag.

Parameters:
Name Type Description
element CustomElement
Since:
  • 1.7.0
Throws:

Failed to execute 'define' on 'CustomElementRegistry': is not a valid custom element name

Type
DOMException
Returns:
Type
void

# (static) removeAttributeToken(element, key, token) → {HTMLElement}

This function can be used to remove tokens from an attribute.

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.removeAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.removeAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {removeAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
removeAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

You can call the method via the monster namespace new Monster.DOM.removeObjectLink().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.removeObjectLink();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {removeObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
removeObjectLink();
</script>
Parameters:
Name Type Description
element HTMLElement
symbol Symbol
Since:
  • 1.9.0
Returns:
Type
boolean

# (static) replaceAttributeToken(element, key, from, to) → {HTMLElement}

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.replaceAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.replaceAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {replaceAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
replaceAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
from string
to string
Since:
  • 1.9.0
Returns:
Type
HTMLElement

# (static) toggleAttributeToken(element, key, token) → {HTMLElement}

With this method tokens in an attribute can be switched on or off. For example, classes can be switched on and off in the elements class attribute.

Tokens are always separated by a space.

You can call the method via the monster namespace new Monster.DOM.toggleAttributeToken().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
Monster.DOM.toggleAttributeToken();
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {toggleAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/attributes.js';
toggleAttributeToken();
</script>
Parameters:
Name Type Description
element HTMLElement
key string
token string
Since:
  • 1.9.0
Returns:
Type
HTMLElement