Module: mxui/dom

Create and manipulate DOM nodes.

Methods

(static) addCss(path, docnullable, medianullable)

Add a link to the given stylesheet to a document.

Parameters:
Name Type Attributes Description
path string

path of the stylesheet location
doc Document <nullable>

document to add the stylesheet link to. Defaults to document.
media string <nullable>

string describing the media types supported by the stylesheet
Example
dom.addCss("my/custom.css");

(static) create(element, propsnullable, …children) → {Element}

Create a dom node.

Parameters:
Name Type Attributes Description
element string

name of the HTML element to create. You can use "#" to create a document fragment.
props Object <nullable>

properties to set on the element. The style property is treated specially: it can be set to an object containing CSS properties and their value.
children Element | string <repeatable>

nodes to append to the newly created element. A string argument will be converted to a text node before appending.
Returns:

the newly created element

Type
Element
Example
var $ = dom.create;

var table = $("table", {
        "class" : "bordered-table",
        style   : "font-weight:bold"
    },
    $("tbody",
        $("tr",
            $("td", "content")
        )
    )
);

var node = $("div", {
        style : {
            color      : "red",
            cursor     : "pointer",
            fontWeight : "bold"
        },
    },
    $("span", "text")
);

(static) disableNode(node)

Disable a node, i.e. add the readonly and disabled attributes to it.

Parameters:
Name Type Description
node Element

the node to disable.
Example
dom.disableNode(node); // disabling a node
dom.enableNode(node); // enabling it again

(static) enableNode(node)

Enable a node, i.e. remove the readonly and disabled attributes from it.

Parameters:
Name Type Description
node Element

the node to enable
Example
dom.disableNode(node); // disabling a node
dom.enableNode(node); // enabling it again

(static) escapeString(str)

Escape HTML special characters so it can safely be used inside HTML documents.

Use this to sanitize data before assigning it to innerHTML.

Parameters:
Name Type Description
str string

string to escape
Example
escaped = dom.escapeString("<script src='evil.example.com/nasty.js'></script>");
// escaped:  "&lt;script src='evil.example.com/script.js'&gt;&lt;/script&gt;"
document.body.innerHTML = escaped;  // No script injection.

(static) getCss(path, docnullable)

Get the element from a document linking to the given stylesheet.

Parameters:
Name Type Attributes Description
path string

path of the stylesheet location
doc Document <nullable>

document in which to look for the stylesheet link. Defaults to document.
Example
cssNode = dom.getCss("css/theme.css"); // Node referencing the theme stylesheet.
cssNode.href = "css/theme2.css"; // Replace stylesheet.

(static) getCursorPosition(input) → {number}

Return the position of the cursor in an input field.

In case of a selection, the lowest position of the selection is returned.

Parameters:
Name Type Description
input Element

the input node
Returns:

position of the cursor

Type
number
Example
dom.getCursorPosition(inputNode);

(static) getSelectedText(node) → {string}

Return the text value of the selected option.

Parameters:
Name Type Description
node HTMLSelectElement

the select node
Returns:

the text value of the selected option

Type
string
Example
dom.setSelectOptions(selectNode, {
    "red": "Cherry red",
    "blue": "Sea blue"
}, "blue");
dom.getSelectedText(selectNode); // "Sea blue"

(static) getSelectedValue(node) → {string}

Return the value of the selected option.

Parameters:
Name Type Description
node HTMLSelectElement

the select node
Returns:

the value of the selected option

Type
string
Example
dom.setSelectOptions(selectNode, {
    "red": "Cherry red",
    "blue": "Sea blue"
}, "blue");
dom.getSelectedValue(selectNode); // "blue"

(static) getSelection(input) → {Object}

Return the start and end positions of the selection in an input field.

The start position is always the lower position.

Parameters:
Name Type Description
input Element

the input node.
Returns:

start and end positions of the selection

Type
Object
Example
dom.getSelection(inputNode); // { start: 1, end: 3 }

(static) removeCss(filepath, docnullable) → {boolean}

Removes a linked css file from the document.

Parameters:
Name Type Attributes Description
filepath string

the path to the CSS file
doc Document <nullable>

document in which to look for the stylesheet link. Defaults to document.
Returns:

true if successful, false otherwise

Type
boolean
Example
dom.removeCss("css/theme.css");

(static) selectTextRange(input, selectionStart, selectionEnd)

Select a range in an input field.

Position 0 is in front of the first character, position 1 is after the first character, etc.

Parameters:
Name Type Description
input Element

the input node
selectionStart number

the begin position of the selection
selectionEnd number

the end position of the selection
Example
// select 3rd character in inputNode
input.focus();
dom.selectTextRange(inputNode, 2, 3);

(static) setSelectOptions(node, options, selected)

Set the given list of options to the select node, and optionally sets the selected value.

Always adds an empty option.

Parameters:
Name Type Description
node HTMLSelectElement

the select node
options Object

object containing the values and captions of the options
selected string

the key of the option which should be selected
Example
dom.setSelectOptions(selectNode, {
    "red": "Cherry red",
    "blue": "Sea blue"
}, "blue");