tui.dom

DOM manipulation utilities

Author:

Examples

// node, commonjs
var domUtil = require('tui-dom');
domUtil.addClass(element, 'foo', 'bar');
// distribution file, script
<script src='path/to/tui-dom.js'></script>
<script>
var domUtil = tui.dom;
domUtil.addClass(element, 'foo', 'bar');
</script>

Methods

static addClass(element, …cssClass)
domutil.js, line 95

Add css class to element

Parameters:
Name Type Attributes Description
element HTMLElement | SVGElement

target element
cssClass string <repeatable>

css classes to add

static checkMouse(element, e) → {boolean}
domevent.js, line 221

Check mouse was leave event element with ignoreing child nodes

Parameters:
Name Type Description
element HTMLElement

element to check
e MouseEvent

mouse event
Returns:
boolean -

whether mouse leave element?

static closest(element, selector) → {HTMLElement}
domutil.js, line 349

Find parent element recursively

Parameters:
Name Type Description
element HTMLElement

base element to start find
selector string

selector string for find
Returns:
HTMLElement -
  • element finded or null

static css(element, key, valueopt)
domutil.js, line 11

Setting element style

Parameters:
Name Type Attributes Description
element HTMLElement | SVGElement

element to setting style
key string | object

style prop name or {prop: value} pair object
value string <optional>

style value

static disableTextSelection(elopt)
domutil.js, line 484

Disable browser's text selection behaviors.

Parameters:
Name Type Attributes Description
el HTMLElement <optional>

target element. if not supplied, use document

static enableTextSelection(elopt)
domutil.js, line 504

Enable browser's text selection behaviors.

Parameters:
Name Type Attributes Description
el HTMLElement <optional>

target element. if not supplied, use document

static find(elementopt, selectoropt) → {HTMLElement}
domutil.js, line 376

Find single element

Parameters:
Name Type Attributes Default Description
element HTMLElement | string <optional>
 document

base element to find
selector string <optional>

css selector
Returns:
HTMLElement

static findAll(elementopt, selectoropt) → {Array.<HTMLElement>}
domutil.js, line 393

Find multiple element

Parameters:
Name Type Attributes Default Description
element HTMLElement | string <optional>
 document

base element to find
selector string <optional>

css selector
Returns:
Array.<HTMLElement>

static getClass(element) → {string}
domutil.js, line 35

Get HTML element's design classes.

Parameters:
Name Type Description
element HTMLElement | SVGElement

target element
Returns:
string -

element css class name

static getData(element, key) → {string}
domutil.js, line 247

Get data value from data-attribute

Parameters:
Name Type Description
element HTMLElement

target element
key string

key
Returns:
string -

value

static getMouseButton(mouseEvent) → {number}
domevent.js, line 265

Normalize mouse event's button attributes.

Can detect which button is clicked by this method.

Meaning of return numbers

  • 0: primary mouse button
  • 1: wheel button or center button
  • 2: secondary mouse button
Parameters:
Name Type Description
mouseEvent MouseEvent

The mouse event object want to know.
Returns:
number -
  • The value of meaning which button is clicked?

static getMousePosition(position, relativeElement) → {Array.<number>}
domevent.js, line 310

Get mouse position from mouse event

If supplied relatveElement parameter then return relative position based on element

Parameters:
Name Type Description
position MouseEvent | object | Array.<number>

mouse position object
relativeElement HTMLElement

HTML element that calculate relative position
Returns:
Array.<number> -

mouse position

static getRect(element) → {object}
domutil.js, line 193

getBoundingClientRect polyfill

Parameters:
Name Type Description
element HTMLElement

target element
Returns:
object -

rect object

static hasClass(element, cssClass) → {boolean}
domutil.js, line 56

Check element has specific css class

Parameters:
Name Type Description
element HTMLElement | SVGElement

target element
cssClass string

css class
Returns:
boolean

static insertAfter(element, target)
domutil.js, line 536

Insert element to next of target element

Parameters:
Name Type Description
element HTMLElement

html element to insert
target HTMLElement

target element

static matches(element, selector) → {boolean}
domutil.js, line 336

Check element match selector

Parameters:
Name Type Description
element HTMLElement

element to check
selector string

selector to check
Returns:
boolean -

is selector matched to element?

static off(element, types, handler)
domevent.js, line 196

Unbind DOM events

Parameters:
Name Type Description
element HTMLElement

element to unbindbind events
types string | object

Space splitted events names or eventName:handler object
handler function | object

handler function or context for handler method

static on(element, types, handler, contextopt)
domevent.js, line 142

Bind DOM events

Parameters:
Name Type Attributes Description
element HTMLElement

element to bind events
types string | object

Space splitted events names or eventName:handler object
handler function | object

handler function or context for handler method
context object <optional>

context - context for handler method.

static once(element, types, handler, contextopt)
domevent.js, line 168

Bind DOM event. this event will unbind after invokes.

Parameters:
Name Type Attributes Description
element HTMLElement

HTMLElement to bind events.
types string | object

Space splitted events names or eventName:handler object.
handler *

handler function or context for handler method.
context * <optional>

context object for handler method.

static preventDefault(e)
domutil.js, line 428

Prevent default action

Parameters:
Name Type Description
e Event

event object

static removeClass(element, …cssClass)
domutil.js, line 164

Remove css class from element

Parameters:
Name Type Attributes Description
element HTMLElement | SVGElement

target element
cssClass string <repeatable>

css classes to remove

static removeData(element, key)
domutil.js, line 266

Remove data property

Parameters:
Name Type Description
element HTMLElement

target element
key string

key

static removeElement(element)
domutil.js, line 286

Remove element from parent node.

Parameters:
Name Type Description
element HTMLElement

element to remove.

static setBound(element, bound)
domutil.js, line 299

Set element bound

Parameters:
Name Type Description
element HTMLElement

element to change bound
bound object

bound object

Properties
Name Type Attributes Description
top number <optional>

top pixel
right number <optional>

right pixel
bottom number <optional>

bottom pixel
left number <optional>

left pixel
width number <optional>

width pixel
height number <optional>

height pixel

static setData(element, key, value)
domutil.js, line 226

Set data attribute to target element

Parameters:
Name Type Description
element HTMLElement

element to set data attribute
key string

key
value string

value

static stopPropagation(e)
domutil.js, line 411

Stop event propagation.

Parameters:
Name Type Description
e Event

event object

static testCSSProp(props) → {string|boolean}
domutil.js, line 445

Check specific CSS style is available.

Parameters:
Name Type Description
props array

property name to testing
Returns:
string | boolean -

return true when property is available

Example
//-- #1. Get Module --//
var domUtil = require('tui-dom'); // node, commonjs
var domUtil = tui.dom; // distribution file

//-- #2. Use property --//
var props = ['transform', '-webkit-transform'];
domutil.testCSSProp(props);    // 'transform'

static textContent(element) → {string}
domutil.js, line 520

Represents the text content of a node and its descendants

Parameters:
Name Type Description
element HTMLElement

html element
Returns:
string -

text content

static toggleClass(element, …cssClass)
domutil.js, line 131

Toggle css class

Parameters:
Name Type Attributes Description
element HTMLElement | SVGElement

target element
cssClass string <repeatable>

css classes to toggle

static upperToHyphenLower(match) → {string}
domutil.js, line 214

Convert uppercase letter to hyphen lowercase character

Parameters:
Name Type Description
match string

match from String.prototype.replace method
Returns:
string