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) add_class(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) box_sizing(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) css_space(element) → {object}

Source:

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

Example
css_space(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) get_class(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) get_duration(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) get_id(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) get_max_time(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
get_max_time(get_style(DOMNode, "animation-duration"));
Parameters:
Name Type Description
string string

The comma separated string.

Returns:
Type
number

(inner) get_style(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) get_tag(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) has_class(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) inner_height(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) inner_width(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) insert_after(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) insert_before(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) is_class_name(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) is_dom_node() → {boolean}

Source:

Check if an object is a DOMNode

Returns:
Type
boolean

(inner) is_touch() → {boolean}

Source:

Check if a device is touch-enabled.

Returns:
Type
boolean

(inner) outer_height(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) outer_width(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) position_left(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) position_top(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) remove_class(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) scroll_all_left(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) scroll_all_top(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) scroll_left(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) scroll_top(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) scrollbar_size() → {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) set_content(element)

Source:

Sets the (exclusive) content of an HTMLElement.

Parameters:
Name Type Description
element HTMLElement

The element receiving the content

(inner) set_style(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) set_styles(element, styles)

Source:

Set multiple CSS styles onto an HTMLElement.

Example
set_styles(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) set_text(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) toggle_class(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) unique_id() → {string}

Source:

Generate a unique ID string.

Returns:
Type
string

(inner) width() → {number}

Source:

Returns the width of the viewport.

Returns:
Type
number