Working with the DOM - JavaScript API#
Helper Functions#
There is large set of helper functions that assist you when working with the DOM tree and its elements. These functions are globally available and do not require explicit module imports.
Dom/Util
#
createFragmentFromHtml(html: string): DocumentFragment
#
Parses a HTML string and creates a DocumentFragment
object that holds the
resulting nodes.
identify(element: Element): string
#
Retrieves the unique identifier (id
) of an element. If it does not currently
have an id assigned, a generic identifier is used instead.
outerHeight(element: Element, styles?: CSSStyleDeclaration): number
#
Computes the outer height of an element using the element's offsetHeight
and
the sum of the rounded down values for margin-top
and margin-bottom
.
outerWidth(element: Element, styles?: CSSStyleDeclaration): number
#
Computes the outer width of an element using the element's offsetWidth
and
the sum of the rounded down values for margin-left
and margin-right
.
outerDimensions(element: Element): { height: number, width: number }
#
Computes the outer dimensions of an element including its margins.
offset(element: Element): { top: number, left: number }
#
Computes the element's offset relative to the top left corner of the document.
setInnerHtml(element: Element, innerHtml: string)
#
Sets the inner HTML of an element via element.innerHTML = innerHtml
. Browsers
do not evaluate any embedded <script>
tags, therefore this method extracts each
of them, creates new <script>
tags and inserts them in their original order of
appearance.
contains(element: Element, child: Element): boolean
#
Evaluates if element
is a direct or indirect parent element of child
.
unwrapChildNodes(element: Element)
#
Moves all child nodes out of element
while maintaining their order, then removes
element
from the document.
Dom/ChangeListener
#
This class is used to observe specific changes to the DOM, for example after an
Ajax request has completed. For performance reasons this is a manually-invoked
listener that does not rely on a MutationObserver
.
1 2 3 4 5 6 7 8 |
|