domUtiladdClass.jsline 23
domUtil module
Static Methods
addClass(element, cssClass)addClass.jsline 23
Add css class to element
PARAMETERS
Name Type Description element
HTMLElementSVGElement
target element
cssClass
string
css classes to add
closest(element, selector)closest.jsline 16
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
disableTextSelection(el)disableTextSelection.jsline 27
Disable browser's text selection behaviors.
PARAMETERS
Name Type Description el
[ HTMLElement ]
target element. if not supplied, use
enableTextSelection(el)enableTextSelection.jsline 28
Enable browser's text selection behaviors.
PARAMETERS
Name Type Description el
[ HTMLElement ]
target element. if not supplied, use
getClass(element)getClass.jsline 15
Get HTML element's design classes.
PARAMETERS
Name Type Description element
HTMLElementSVGElement
target element
RETURNS:
{string
} - element css class name
getData(element, key)getData.jsline 16
Get data value from data-attribute
PARAMETERS
Name Type Description element
HTMLElement
target element
key
string
key
RETURNS:
{string
} - value
hasClass(element, cssClass)hasClass.jsline 17
Check element has specific css class
PARAMETERS
Name Type Description element
HTMLElementSVGElement
target element
cssClass
string
css class
RETURNS:
{boolean
}
matches(element, selector)matches.jsline 28
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?
removeClass(element, cssClass)removeClass.jsline 18
Remove css class from element
PARAMETERS
Name Type Description element
HTMLElementSVGElement
target element
cssClass
string
css classes to remove
removeData(element, key)removeData.jsline 15
Remove data property
PARAMETERS
Name Type Description element
HTMLElement
target element
key
string
key
removeElement(element)removeElement.jsline 12
Remove element from parent node.
PARAMETERS
Name Type Description element
HTMLElement
element to remove.
setData(element, key, value)setData.jsline 16
Set data attribute to target element
PARAMETERS
Name Type Description element
HTMLElement
element to set data attribute
key
string
key
value
string
value
template(text, context)template.jsline 383
Convert text by binding expressions with context.
If expression exists in the context, it will be replaced.
ex) '{{title}}' with context {title: 'Hello!'} is converted to 'Hello!'.
An array or object can be accessed using bracket and dot notation.
ex) '{{odds[2]}}' with context {odds: [1, 3, 5]} is converted to '5'.
ex) '{{evens[first]}}' with context {evens: [2, 4], first: 0} is converted to '2'.
ex) '{{project["name"]}}' and '{{project.name}}' with context {project: {name: 'CodeSnippet'}} is converted to 'CodeSnippet'.
If replaced expression is a function, next expressions will be arguments of the function.
ex) '{{add 1 2}}' with context {add: function(a, b) {return a + b;}} is converted to '3'.
It has 3 predefined block helpers '{{helper ...}} ... {{/helper}}': 'if', 'each', 'with ... as ...'.
1) 'if' evaluates conditional statements. It can use with 'elseif' and 'else'.
2) 'each' iterates an array or object. It provides '@index'(array), '@key'(object), and '@this'(current element).
3) 'with ... as ...' provides an alias.PARAMETERS
Name Type Description text
string
text with expressions
context
object
context
RETURNS:
{string
} - text that bind with its contextEXAMPLES
// ES6 import template from 'tui-code-snippet/domUtil/template'; // CommonJS const template = require('tui-code-snippet/domUtil/template'); const source = '<h1>' + '{{if isValidNumber title}}' + '{{title}}th' + '{{elseif isValidDate title}}' + 'Date: {{title}}' + '{{/if}}' + '</h1>' + '{{each list}}' + '{{with addOne @index as idx}}' + '<p>{{idx}}: {{@this}}</p>' + '{{/with}}' + '{{/each}}'; const context = { isValidDate: function(text) { return /^\d{4}-(0|1)\d-(0|1|2|3)\d$/.test(text); }, isValidNumber: function(text) { return /^\d+$/.test(text); }, title: '2019-11-25', list: ['Clean the room', 'Wash the dishes'], addOne: function(num) { return num + 1; } }; const result = template(source, context); console.log(result); // <h1>Date: 2019-11-25</h1><p>1: Clean the room</p><p>2: Wash the dishes</p>
toggleClass(element, cssClass)toggleClass.jsline 18
Toggle css class
PARAMETERS
Name Type Description element
HTMLElementSVGElement
target element
cssClass
string
css classes to toggle