Documentation
Tutorials
Form messages Widget Lifecycle

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.

the newly created element

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

position of the cursor

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

the text value of the selected option

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

the value of the selected option

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.

start and end positions of the selection

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.

true if successful, false otherwise

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");