utils/dom

Helper functions for manipulating the DOM

Source:

Members

(static, constant) supports_transform

Source:

True if the current browser supports CSS transforms.

Methods

(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) 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) 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) → {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

Returns:
Type
number

(inner) innerWidth(element, width) → {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

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(string) → {boolean}

Source:

Returns true ii a string could be a class name.

Parameters:
Name Type Description
string 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) outerHeight(element, margin, height) → {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

Returns:
Type
number

(inner) outerWidth(element, margin, width) → {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

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) scrollbarSize() → {integer}

Source:

Evaluate size of scroll bars. The size is set as CSS variable --aux-scrollbar-size on the body element.

Returns:

Size in pixel.

Type
integer

(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) 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