Skip to content

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
require(["Dom/ChangeListener"], function(DomChangeListener) {
  DomChangeListener.add("App/Foo", function() {
    // the DOM may have been altered significantly
  });

  // propagate changes to the DOM
  DomChangeListener.trigger();
});

Last update: 2021-01-08