Skip to content

Working with the DOM - JavaScript API#

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: 2022-10-21