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 TAU, 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. |