DOM Utility

The DOM utility is a utility object that provides DOM manipulation, and support for CSS properties and DOM attributes.

Table of Contents

  1. Replacing jQuery Methods with TAU Methods
    1. append vs. appendNodes
    2. replaceWith vs. replaceWithNodes
    3. before vs. insertNodesBefore
    4. wrapInner vs. wrapInHTML
  2. DOM Utility Methods

Replacing jQuery Methods with TAU Methods

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.

append vs. appendNodes

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:

HTML code after manipulation:

<div>
   <div id="first">Hello</div>
   <div id="second">And
      <span>Test</span>
   </div>
   <div id="third">Goodbye</div>
</div>

replaceWith vs. replaceWithNodes

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:

HTML code after manipulation:

<div>
   <div id="first">Hello</div>
   <span>Test</span>
   <div id="third">Goodbye</div>
</div>

before vs. insertNodesBefore

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:

HTML code after manipulation:

<div>
   <div id="first">Hello</div>
   <span>Test</span>
   <div id="second">And</div>
   <div id="third">Goodbye</div>
</div>

wrapInner vs. wrapInHTML

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:

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>

DOM Utility Methods

Summary

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.
If the namespace is empty, the attribute data-{name} is used.
The method can return a boolean if the attribute value is a 'true' or 'false' string.

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.
If the namespace is empty, the data-{name} attribute is used.

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.
If the namespace is empty, the data-{name} attribute is used.

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 value
removeAttribute

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 value
removeNSData

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 value
replaceWithNodes

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 value
setNSData

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 value
wrapInHTML

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.