The DOM utility is a utility object that provides DOM manipulation, and support for CSS properties and DOM attributes.
Some useful DOM utility methods are supported by the Web UI framework, so you can use TAU-based DOM methods (pure JavaScript) instead of jQuery methods.
HTML code before manipulation:
<div> <div id="first">Hello</div> <div id="second">And</div> <div id="third">Goodbye</div> </div>
To append an element to the end of a specific node value, manipulate with:
$("#second").append("<span>Test</span>");
var context = document.getElementById("second"), element = document.createElement("span"); element.innerHTML = "Test"; tau.util.DOM.appendNodes(context, element);
HTML code after manipulation:
<div> <div id="first">Hello</div> <div id="second">And <span>Test</span> </div> <div id="third">Goodbye</div> </div>
HTML code before manipulation:
<div> <div id="first">Hello</div> <div id="second">And</div> <div id="third">Goodbye</div> </div>
To replace a node, manipulate with:
$('#second').replaceWith("<span>Test</span>");
var context = document.getElementById("second"), element = document.createElement("span"); element.innerHTML = "Test"; tau.util.DOM.replaceWithNodes(context, element);
HTML code after manipulation:
<div> <div id="first">Hello</div> <span>Test</span> <div id="third">Goodbye</div> </div>
HTML code before manipulation:
<div> <div id="first">Hello</div> <div id="second">And</div> <div id="third">Goodbye</div> </div>
To add an element before a specific node, manipulate with:
$("#second").before("<span>Test</span>");
var context = document.getElementById("second"), element = document.createElement("span"); element.innerHTML = "Test"; tau.util.DOM.insertNodesBefore(context, element);
HTML code after manipulation:
<div> <div id="first">Hello</div> <span>Test</span> <div id="second">And</div> <div id="third">Goodbye</div> </div>
HTML code before manipulation:
<div> <div id="first">Hello</div> <div id="second">And</div> <div id="third">Goodbye</div> </div>
To wrap a specific node value inside an element, manipulate with:
$("#second").wrapInner("<span class="new"></span>");
var element = document.getElementById("second"); tau.util.DOM.wrapInHTML(element, "<span class="new"></span>");
HTML code after manipulation:
<div> <div id="first">Hello</div> <span class="new"> <div id="second">And</div> </span> <div id="third">Goodbye</div> </div>
Method | Description |
---|---|
HTMLElement,Array appendNodes (HTMLElement context, HTMLElement | HTMLCollection | NodeList | Array elements) |
Appends a node or array-like node list array to the context. |
string,number,null getCSSProperty (HTMLElement element, string property, null, "integer" | "float" | null) |
Returns the CSS property for an element. |
Object getData (HTMLElement element) |
Returns an object with all the data-* attributes of an element. |
number getElementHeight (HTMLElement element, "outer" | null? type = null, boolean? includeOffset = false, boolean? includeMargin = false, string? pseudoSelector = null, boolean? force = false) |
Returns the element height from the computed style. |
Object getElementOffset (HTMLElement element) |
Returns the element offset. |
number getElementWidth (HTMLElement element, "outer" | null?, boolean? includeOffset = false, boolean? includeMargin = false, string? pseudoSelector = null, boolean? force = false) |
Returns the element width from the computed style. |
?string,boolean getNSData (HTMLElement element, string name) |
Returns the value of the data-{namespace}-{name} attribute for an element. |
HTMLElement insertNodeAfter (HTMLElement context, HTMLElement element) |
Inserts a node after the context. |
HTMLElement,Array,null insertNodesBefore (HTMLElement context, HTMLElement | HTMLCollection | NodeList | Array elements) |
Inserts a node or array-like node list before the context. |
removeAllChildren (HTMLElement context) |
Removes all children. |
removeAttribute (HTMLElement element, string name) |
Removes an attribute and property at the same time. |
removeNSData (HTMLElement element, string name) |
Removes the data-{namespace}-{name} attribute from an element. |
HTMLElement,Array,null replaceWithNodes (HTMLElement context, HTMLElement | HTMLCollection | NodeList | Array elements) |
Replaces the context with a node or array-like node list. |
setAttribute (HTMLElement element, string name, Mixed value) |
Sets an attribute and property at the same time. |
setNSData (HTMLElement element, string name, string | number | boolean value) |
Sets the value of the data-{namespace}-{name} attribute for an element. |
HTMLElement,NodeList,Array wrapInHTML (HTMLElement | NodeList | HTMLCollection | Array elements, string html) |
Wraps an element or array-like node list in the html markup. |
appendNodes
Appends a node or array-like node list array to the context.
HTMLElement,Array,null appendNodes (context, elements)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
context | HTMLElement | Required | ||
elements | HTMLElement | HTMLCollection | NodeList | Array | Required |
Return value:
Type | Description |
---|---|
HTMLElement,Array,null |
getCSSProperty
Returns the CSS property for an element.
string,number,null getCSSProperty (element, property, def, type)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | ||
property | string | Required | ||
def | string | number | null | Optional | null | Default returned value. |
type | "integer" | "float" | null | Optional | null | Auto type casting. |
Return value:
Type | Description |
---|---|
string,number,null |
getData
Returns an object with all the data-* attributes of an element.
Object getData (element)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | Base element. |
Return value:
Type | Description |
---|---|
Object |
getElementHeight
Returns the element height from the computed style.
number getElementHeight (element, type, includeOffset, includeMargin, pseudoSelector, force)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | ||
type | "outer" | null | Optional | null | |
includeOffset | boolean | Optional | false | |
includeMargin | boolean | Optional | false | |
pseudoSelector | string | Optional | null | |
force | boolean | Optional | false | Checks whether the element is hidden. |
Return value:
Type | Description |
---|---|
number | height of the element |
getElementOffset
Returns the element offset.
Object getElementOffset (element)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required |
Return value:
Type | Description |
---|---|
Object | Offset object of the element |
getElementWidth
Returns the element width from the computed style.
number getElementWidth (element, type, includeOffset, includeMargin, pseudoSelector, force)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | ||
type | "outer" | null | Optional | null | |
includeOffset | boolean | Optional | false | |
includeMargin | boolean | Optional | false | |
pseudoSelector | string | Optional | null | |
force | boolean | Optional | false | Checks whether the element is hidden. |
Return value:
Type | Description |
---|---|
number | width of the element |
getNSData
Returns the value of the data-{namespace}-{name} attribute for an element.
If the namespace is empty, the data-{name} attribute is used.
The method can return a boolean if the attribute value is a 'true' or 'false' string.
?string, boolean getNSData (element, name)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | Base element. | |
name | string | Required | Name of the attribute. |
Return value:
Type | Description |
---|---|
?string,boolean |
insertNodeAfter
Inserts a node after the context.
HTMLElement insertNodeAfter (context, element)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
context | HTMLElement | Required | ||
element | HTMLElement | Required |
Return value:
Type | Description |
---|---|
HTMLElement |
insertNodesBefore
Inserts a node or array-like node list before the context.
HTMLElement,Array,null insertNodesBefore (context, elements)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
context | HTMLElement | Required | ||
elements | HTMLElement | HTMLCollection | NodeList | Array | Required |
Return value:
Type | Description |
---|---|
HTMLElement,Array,null |
removeAllChildren
Removes all children.
removeAllChildren (context)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
context | HTMLElement | Required |
Return value:
No return valueremoveAttribute
Removes an attribute and property at the same time.
removeAttribute (element, name)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | ||
name | string | Required |
Return value:
No return valueremoveNSData
Removes the data-{namespace}-{name} attribute from an element.
If the namespace is empty, the data-{name} attribute is used.
removeNSData (element, name)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | Base element. | |
name | string | Required | Name of the attribute. |
Return value:
No return valuereplaceWithNodes
Replaces the context with a node or array-like node list.
HTMLElement,Array,null replaceWithNodes (context, elements)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
context | HTMLElement | Required | ||
elements | HTMLElement | HTMLCollection | NodeList | Array | Required |
setAttribute
Sets an attribute and property at the same time.
setAttribute (element, name, value)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | ||
name | string | Required | ||
value | Mixed | Required |
Return value:
No return valuesetNSData
Sets the value of the data-{namespace}-{name} attribute for an element.
If the namespace is empty, the data-{name} attribute is used.
setNSData (element, name, value)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
element | HTMLElement | Required | Base element. | |
name | string | Required | Name of the attribute. | |
value | string | number | boolean | Required | New value. |
Return value:
No return valuewrapInHTML
Wraps an element or array-like node list in the html markup.
HTMLElement,NodeList,Array wrapInHTML (elements, html)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
elements | HTMLElement | NodeList | HTMLCollection | Array | Required | ||
html | string | Required |
Return value:
Type | Description |
---|---|
HTMLElement,NodeList,Array | Wrapped element. |