In this namespace you will find classes and methods for handling the DOM.
Classes
- Assembler
Allows you to build an html fragment
- CustomControl
A base class for customcontrols based on CustomElement
- CustomElement
A base class for HTML5 customcontrols
- Template
A template class
- Theme
A theme class
- Updater
The updater class connects an object with the dom
Members
# (static, constant) assembleMethodSymbol :symbol
- symbol
# (static, constant) ATTRIBUTE_OBJECTLINK :string
- string
- Since:
- 1.9.0
# (static, constant) ATTRIBUTE_OPTIONS :string
This is the name of the attribute to pass options to a control
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTE_PREFIX :string
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTE_ROLE :string
- string
- Since:
- 1.14.0
# (static, constant) ATTRIBUTE_THEME_NAME :string
- string
# (static, constant) ATTRIBUTE_THEME_PREFIX :string
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTE_UPDATER_ATTRIBUTES :string
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTE_UPDATER_BIND :string
- string
- Since:
- 1.9.0
# (static, constant) ATTRIBUTE_UPDATER_INSERT :string
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTE_UPDATER_INSERT_REFERENCE :string
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTE_UPDATER_REMOVE :string
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTE_UPDATER_REPLACE :string
- string
- Since:
- 1.8.0
# (static, constant) ATTRIBUTEPREFIX :string
attribute prefix
- string
# (static, constant) DEFAULT_THEME :string
default theme
- string
# (static, constant) initMethodSymbol :symbol
- symbol
# (static, constant) OBJECTLINK_KEY_UPDATER :string
- 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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
addAttributeToken();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
key |
string | |
token |
string |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- Type
- HTMLElement
# (static) addToObjectLink(element, symbol, object) → {boolean}
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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
addToObjectLink();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
symbol |
Symbol | |
object |
Object |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- 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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
clearAttributeTokens();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
key |
string |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- 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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
containsAttributeToken();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
key |
string | |
token |
string |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- Type
- boolean
# (static) findClosestByAttribute(element, key, value) → {HTMLElement|undefined}
You can call the method via the monster namespace new Monster.DOM.findClosestByAttribute()
.
<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/attributes.js';
Monster.DOM.findClosestByAttribute();
</script>
Alternatively, you can also integrate this function individually.
<script type="module">
import {findClosestByAttribute} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/attributes.js';
findClosestByAttribute();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
key |
string | |
value |
string | undefined |
- Since:
- 1.14.0
- Copyright:
- schukai GmbH
- Type
- HTMLElement | undefined
# (static) findClosestObjectLink(element) → {HTMLElement|undefined}
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@1.23.0/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@1.23.0/dist/modules/dom/updater.js';
console.log(findClosestObjectLink())
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement |
- Since:
- 1.10.0
- Copyright:
- schukai GmbH
-
value is not an instance of HTMLElement
- Type
- TypeError
- Type
- HTMLElement | undefined
# (static) findDocumentTemplate(id, currentNode) → {Monster.DOM.Template}
This method loads a template with the given ID and returns it.
To do this, it first fetches the theme of the document and looks for the data-monster-theme-name
attribute in the HTML tag.
<html data-monster-theme-name="my-theme">
If no theme was specified, the default theme is monster
.
Now it is looked if there is a template with the given ID and theme id-theme
and if yes it is returned.
If there is no template a search for a template with the given ID id
is done. If this is also not found, an error is thrown.
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@1.23.0/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@1.23.0/dist/modules/dom/template.js';
console.log(findDocumentTemplate())
</script>
Name | Type | Description |
---|---|---|
id |
string | |
currentNode |
Node |
- Since:
- 1.7.0
- Copyright:
- schukai GmbH
-
-
template id not found.
- Type
- Error
-
-
-
value is not a string
- Type
- TypeError
-
- Type
- Monster.DOM.Template
# (static) findTargetElementFromEvent(event, attributeName, attributeValue)
Help function to find the appropriate control
This function gets the path Event.composedPath()
from an event and tries to find the next element
up the tree element.closest()
with the attribute and value. If no value, or a value that is undefined or null,
is specified, only the attribute is searched.
You can call the function via the monster namespace new Monster.DOM.findTargetElementFromEvent()
.
<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/events.js';
console.log(new Monster.DOM.findTargetElementFromEvent())
</script>
Alternatively, you can also integrate this function individually.
<script type="module">
import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/events.js';
console.log(findTargetElementFromEvent())
</script>
Name | Type | Description |
---|---|---|
event |
Event | |
attributeName |
string | |
attributeValue |
string | null | undefined |
- Since:
- 1.14.0
-
-
unsupported event
- Type
- Error
-
-
-
value is not a string
- Type
- TypeError
-
-
-
value is not an instance of HTMLElement
- Type
- TypeError
-
# (static) fireEvent(element, type) → {void}
Construct and send and event
You can call the function via the monster namespace new Monster.DOM.fireEvent()
.
<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/events.js';
console.log(new Monster.DOM.fireEvent())
</script>
Alternatively, you can also integrate this function individually.
<script type="module">
import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/events.js';
console.log(fireEvent())
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | HTMLCollection | NodeList | |
type |
string |
- Since:
- 1.10.0
- Copyright:
- schukai GmbH
-
value is not an instance of HTMLElement or HTMLCollection
- Type
- TypeError
- Type
- void
# (static) getDocument() → {object}
this method fetches the document object
<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/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@1.23.0/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
- Copyright:
- schukai GmbH
-
not supported environment
- Type
- Error
- Type
- object
# (static) getDocumentFragmentFromString() → {DocumentFragment}
this method fetches the document object
<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/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@1.23.0/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
- Copyright:
- schukai GmbH
-
-
not supported environment
- Type
- Error
-
-
-
value is not a string
- Type
- TypeError
-
- Type
- DocumentFragment
# (static) getDocumentTheme() → {Theme}
The theming used in the document can be defined via the html-tag.
The theming is specified via the attribute data-monster-theme-name
.
As name for a theme all characters are valid, which are also allowed for a HTMLElement-ID.
<html data-monster-theme-name="my-theme">
the default theme name is monster
.
- Since:
- 1.7.0
- Type
- Theme
# (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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
getLinkedObjects();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
symbol |
Symbol |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
-
there is no object link for symbol
- Type
- Error
- Type
- Iterator
# (static) getLocaleOfDocument()
Tries to determine the locale used
With this function you can read the language version set by the document.
For this the attribute lang
in the html tag is read. If no attribute is set, en
is used as default.
You can call the function via the monster namespace new Monster.DOM.getLocaleOfDocument()
.
<script type="module">
import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/locale.js';
console.log(new Monster.DOM.getLocaleOfDocument())
</script>
Alternatively, you can also integrate this function individually.
<script type="module">
import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/locale.js';
console.log(new getLocaleOfDocument())
</script>
- Since:
- 1.13.0
- Copyright:
- schukai GmbH
-
-
value is not a string
- Type
- TypeError
-
-
-
unsupported locale
- Type
- Error
-
# (static) getWindow() → {object}
this method fetches the window object
<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/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@1.23.0/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
- Copyright:
- schukai GmbH
-
not supported environment
- Type
- Error
- Type
- object
# (static) hasObjectLink(element, symbol) → {boolean}
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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
hasObjectLink();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
symbol |
Symbol |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- Type
- boolean
# (static) registerCustomElement(element) → {void}
This method registers a new element. The string returned by CustomElement.getTag()
is used as the tag.
Name | Type | Description |
---|---|---|
element |
CustomElement |
- Since:
- 1.7.0
- Copyright:
- schukai GmbH
-
Failed to execute 'define' on 'CustomElementRegistry': is not a valid custom element name
- Type
- DOMException
- 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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
removeAttributeToken();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
key |
string | |
token |
string |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- Type
- HTMLElement
# (static) removeObjectLink(element, symbol) → {boolean}
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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
removeObjectLink();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
symbol |
Symbol |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- 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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
replaceAttributeToken();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
key |
string | |
from |
string | |
to |
string |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- 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@1.23.0/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@1.23.0/dist/modules/dom/attributes.js';
toggleAttributeToken();
</script>
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
key |
string | |
token |
string |
- Since:
- 1.9.0
- Copyright:
- schukai GmbH
- Type
- HTMLElement