DOMWatcher listens for changes do the DOM tree. It's built on top of MutationObserver.

It manages registered callbacks globally and reuses MutationObservers for more efficient performance.

Each instance of DOMWatcher manages up to two MutationObservers: one for childList changes and one for attribute changes, and it disconnects them when there are no active callbacks for the relevant type.

characterData and changes to base Nodes (non-Element) are not supported.

Methods

Properties

ignoreMove: (target: Element, options: MoveOptions) => void

Ignore an upcoming moving/adding/removing of an element.

The operation must complete within the next cycle, by the time MutationObserver calls us.

Use this to prevent this instance of DOMWatcher from calling any callbacks that listen for relevant changes as a result of this operation, to prevent loops for example.

IMPORTANT:

Ignoring moving of an element from a parent inside this DOMWatcher's root to another parent that's outside the root, will work as expected, even though the "adding to the new parent" mutation will not be observed. This is because the element's current parent at the time of the mutation callback can be examined.

However if you want to ignore moving of an element from a parent outside this DOMWatcher's root you need to specify from: null since the "removal from the old parent" mutation would not be observed and there's no way to examine it's previous parent at the time the "adding to the new parent" mutation is observed.

For this reason, setting options.from to be an element that's not under the root is internally treated the same as options.from: null.

offMutation: (handler: OnMutationHandler) => void

Removes a previously added handler.

onMutation: (
    handler: OnMutationHandler,
    options?: OnMutationOptions,
) => Promise<void>

Call the given handler whenever there's a matching mutation within this DOMWatcher's root.

If options.skipInitial is false (default), and options.selector is given, and options.categories includes "added", the handler is also called (almost) immediately with all existing elements matching the selector under this DOMWatcher's root.

IMPORTANT: The same handler can not be added multiple times, even if the options differ. If the handler has already been added, it is removed and re-added with the current options.

LisnUsageError If the options are not valid.