utils/dom

Helper functions for manipulating the DOM

Source:

Members

(static, constant) supports_transform

Source:

True if the current browser supports CSS transforms.

Methods

(static) isCSSVariableName(str) → {boolean}

Source:

Returns true if the given string could be a CSS custom property name (i.e. if it starts with -- and does not contain any illegal characters).

Parameters:
Name Type Description
str string
Returns:
Type
boolean

(inner) addClass(node, …names)

Source:

Adds a CSS class to a DOM node.

Parameters:
Name Type Attributes Description
node HTMLElement | SVGElement

The DOM node.
names * <repeatable>

The class names.

(inner) boxSizing(element) → {string}

Source:

Returns the box-sizing method of an HTMLElement.

Parameters:
Name Type Description
element HTMLElement

The element to evaluate
Returns:
Type
string

(inner) createID() → {string}

Source:

Create a unique ID string.

Returns:
Type
string

(inner) CSSSpace(element) → {object}

Source:

Returns the overall spacing around an HTMLElement of all given attributes.

Example
CSSSpace(element, "padding", "border");
Parameters:
Name Type Description
element HTMLElement

The element to evaluate
Returns:

An object with the members "top", "bottom", "lfet", "right"

Type
object

(inner) element(tag, …attributes, …class)

Source:

Returns a newly created HTMLElement.

Parameters:
Name Type Attributes Description
tag string

The type of the element
attributes object <repeatable>

Optional mapping of attributes for the new node
class string <repeatable>

Optional class name for the new node
Returns:

HTMLElement

(inner) empty(element)

Source:

Removes all child nodes from an HTMLElement.

Parameters:
Name Type Description
element HTMLElement

The element to clean up

(inner) fixed(element) → {boolean}

Source:

Returns if an element is positioned fixed to the viewport

Parameters:
Name Type Description
element HTMLElement

the element to evaluate
Returns:
Type
boolean

(inner) getClass(class, element) → {NodeList}

Source:

Returns all elements as NodeList of a given class name. Optionally limit the list to all children of a specific DOM node. Shorthand for element.getElementsByClassName.

Parameters:
Name Type Description
class string

The name of the class
element DOMNode

Limit search to child nodes of this element. Optional.
Returns:
Type
NodeList

(inner) getDuration(element) → {number}

Source:

Returns the longest animation duration of CSS animations and transitions.

Parameters:
Name Type Description
element HTMLElement

The element to evalute the animation duration for.
Returns:
Type
number

(inner) getFocusableELements(element) → {array}

Source:

Get all child elements which can be focused.

Parameters:
Name Type Description
element HTMLElement

The parent element. If omitted, document.body is used.
Returns:
Type
array

(inner) getId(id) → {HTMLElement}

Source:

Returns the DOM node with the given ID. Shorthand for document.getElementById.

Parameters:
Name Type Description
id string

The ID to search for
Returns:
Type
HTMLElement

(inner) getMaxTime(string) → {number}

Source:

Returns the maximum value (float) of a comma separated string. It is used to find the longest CSS animation in a set of multiple animations.

Example
getMaxTime(getStyle(DOMNode, "animation-duration"));
Parameters:
Name Type Description
string string

The comma separated string.
Returns:
Type
number

(inner) getStyle(node, property) → {string}

Source:

Returns the computed style of a node.

Parameters:
Name Type Description
node HTMLElement | SVGElement

The DOM node.
property string

The CSS property name.
Returns:
Type
string

(inner) getTag(tag, element) → {NodeList}

Source:

Returns all elements as NodeList of a given tag name. Optionally limit the list to all children of a specific DOM node. Shorthand for element.getElementsByTagName.

Parameters:
Name Type Description
tag string

The name of the tag
element DOMNode

Limit search to child nodes of this element. Optional.
Returns:
Type
NodeList

(inner) hasClass(node, name) → {boolean}

Source:

Returns true if the node has the given class.

Parameters:
Name Type Description
node HTMLElement | SVGElement

The DOM node.
name string

The class name.
Returns:
Type
boolean

(inner) height() → {number}

Source:

Returns the height of the viewport.

Returns:
Type
number

(inner) HTML(html) → {HTMLFragment}

Source:

Returns a documentFragment containing the result of a string parsed as HTML.

Parameters:
Name Type Description
html string

A string to parse as HTML
Returns:
Type
HTMLFragment

(inner) innerHeight(element, height, notransform) → {number}

Source:

Gets or sets the inner height of an element as CSS pixels. The box sizing method is taken into account.

Parameters:
Name Type Description
element HTMLElement

the element to evaluate / manipulate
height number

If defined the elements outer height is set to this value
notransform boolean

Don't take transformations into account.
Returns:
Type
number

(inner) innerWidth(element, width, notransform) → {number}

Source:

Gets or sets the inner width of an element as CSS pixels. The box sizing method is taken into account.

Parameters:
Name Type Description
element HTMLElement

the element to evaluate / manipulate
width number

If defined the elements inner width is set to this value
notransform boolean

Don't take transformations into account.
Returns:
Type
number

(inner) insertAfter(newnode, refnode)

Source:

Inserts one HTMLELement after another in the DOM tree.

Parameters:
Name Type Description
newnode HTMLElement

The new node to insert into the DOM tree
refnode HTMLElement

The reference element to add the new element after

(inner) insertBefore(newnode, refnode)

Source:

Inserts one HTMLELement before another in the DOM tree.

Parameters:
Name Type Description
newnode HTMLElement

The new node to insert into the DOM tree
refnode HTMLElement

The reference element to add the new element before

(inner) isClassName(str) → {boolean}

Source:

Returns true if a string could be a class name.

Parameters:
Name Type Description
str string

The string to test
Returns:
Type
boolean

(inner) isDomNode() → {boolean}

Source:

Check if an object is a DOMNode

Returns:
Type
boolean

(inner) isTouch() → {boolean}

Source:

Check if a device is touch-enabled.

Returns:
Type
boolean

(inner) observeDOM(element, callback, options) → {MutationObserver}

Source:

Observe part of the DOM for changes. The callback is called if nodes are added or removed from the DOM structire (including subtrees).

Parameters:
Name Type Description
element HTMLNode

The parent element. If omitted, document.body is used.
callback function

The callback function.
options object

An object containing options. See https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe Default is {childList: true, subtree: true}.
Returns:
Type
MutationObserver

(inner) outerHeight(element, margin, height, notransform) → {number}

Source:

Gets or sets the outer height of an element as CSS pixels. The box sizing method is taken into account.

Parameters:
Name Type Description
element HTMLElement

the element to evaluate / manipulate
margin boolean

Determine if margin is included
height number

If defined the elements outer height is set to this value
notransform boolean

Don't take transformations into account.
Returns:
Type
number

(inner) outerWidth(element, margin, width, notransform) → {number}

Source:

Gets or sets the outer width of an element as CSS pixels. The box sizing method is taken into account.

Parameters:
Name Type Description
element HTMLElement

the element to evaluate / manipulate
margin boolean

Determine if margin is included
width number

If defined the elements outer width is set to this value
notransform boolean

Don't take transformations into account.
Returns:
Type
number

(inner) positionLeft(element, relation) → {number}

Source:

Returns the position from the left of an element in relation to the document or an optional HTMLElement. Scrolling of the parent is taken into account.

Parameters:
Name Type Description
element HTMLElement

The element to evaluate
relation HTMLElement

The element to use as reference. Optional.
Returns:
Type
number

(inner) positionTop(element, relation) → {number}

Source:

Returns the position from top of an element in relation to the document or an optional HTMLElement. Scrolling of the parent is taken into account.

Parameters:
Name Type Description
element HTMLElement

The element to evaluate
relation HTMLElement

The element to use as reference. Optional.
Returns:
Type
number

(inner) removeClass(node, …names)

Source:

Removes a CSS class from a DOM node.

Parameters:
Name Type Attributes Description
node HTMLElement | SVGElement

The DOM node.
names * <repeatable>

The class names.

(inner) scrollAllLeft(element) → {number}

Source:

Returns the sum of CSS pixels an element and all of its parents are scrolled from left.

Parameters:
Name Type Description
element HTMLElement

The element to evaluate
Returns:
Type
number

(inner) scrollAllTop(element) → {number}

Source:

Returns the sum of CSS pixels an element and all of its parents are scrolled from top.

Parameters:
Name Type Description
element HTMLElement

The element to evaluate
Returns:
Type
number

(inner) scrollLeft(element) → {number}

Source:

Returns the amount of CSS pixels the document or an optional element is scrolled from left.

Parameters:
Name Type Description
element HTMLElement

The element to evaluate. Optional.
Returns:
Type
number

(inner) scrollTop(element) → {number}

Source:

Returns the amount of CSS pixels the document or an optional element is scrolled from top.

Parameters:
Name Type Description
element HTMLElement

The element to evaluate. Optional.
Returns:
Type
number

(inner) setContent(element)

Source:

Sets the (exclusive) content of an HTMLElement.

Parameters:
Name Type Description
element HTMLElement

The element receiving the content

(inner) setDelayedFocus(element, timeoutopt)

Source:

Set focus to an element after a short timeout. This can be used to prevent browsers grabbing focus because of bubbling or collecting.

Parameters:
Name Type Attributes Default Description
element HTMLElement

The element to set focus on.
timeout Number <optional>
 50

The timeout to use in milliseconds.

(inner) setStyle(element, style, value)

Source:

Sets a single CSS style onto an HTMLElement. It is used to autimatically add "px" to numbers and trim them to 3 digits at max. DEPRECATED!

Parameters:
Name Type Description
element HTMLElement

The element to set the style to
style string

The CSS attribute to set
value string | number

The value to set the CSS attribute to

(inner) setStyles(element, styles)

Source:

Set multiple CSS styles onto an HTMLElement.

Example
setStyles(element, {"width":"100px", "height":"100px"});
Parameters:
Name Type Description
element HTMLElement

the element to add the styles to
styles object

A mapping containing all styles to add

(inner) setText(element, text)

Source:

Sets a string as new exclusive text node of an HTMLElement.

Parameters:
Name Type Description
element HTMLElement

The element to clean up
text string

The string to set as text content

(inner) toggleClass(node, name)

Source:

Toggles a CSS class from a DOM node.

Parameters:
Name Type Description
node HTMLElement | SVGElement

The DOM node.
name string

The class name.

(inner) uniqueId() → {string}

Source:

Generate a unique ID string.

Returns:
Type
string

(inner) width() → {number}

Source:

Returns the width of the viewport.

Returns:
Type
number