MutationObserver.observe

The MutationObserver method observe() configures the MutationObserver callback to begin receiving notifications of changes to the DOM that match the given options. Depending on the configuration, the observer may watch a single Node in the DOM tree, or that node and some or all of its descendant nodes.

To stop the MutationObserver (so that none of its callbacks will be triggered any longer), call MutationObserver.disconnect().

Syntax

mutationObserver.observe(target[, options])

Parameters

target

A DOM Node (which may be an Element) within the DOM tree to watch for changes, or to be the root of a subtree of nodes to be watched.

options Optional

An optional MutationObserverInit object providing options that describe what DOM mutations should be reported to the observer's callback.

Return value

undefined.

Exceptions

TypeError

Thrown in any of the following circumstances:

• The options are configured such that nothing will actually be monitored (for example, if MutationObserverInit.childList, MutationObserverInit.attributes, and MutationObserverInit.characterData are all false).
• The attributes option is false (indicating that attribute changes are not not to be monitored) but attributeOldValue is true and/or attributeFilter is present.
• The characterDataOldValue option is true but MutationObserverInit.characterData is false (indicating that character changes aren't to be tracked).

Usage notes

Reusing MutationObservers

You can call observe() multiple times on the same MutationObserver to watch for changes to different parts of the DOM tree and/or different types of changes. There are some caveats to note:

• If you call observe() on a node that's already being observed by the same MutationObserver, all existing observers are automatically removed from all targets being observed before the new observer is activated.
• If the same MutationObserver is not already in use on the target, then the existing observers are left alone and the new one is added.

Observation follows nodes when disconnected

Mutation observers are intended to let you be able to watch the desired set of nodes over time, even if the direct connections between those nodes are severed. If you begin watching a subtree of nodes, and a portion of that subtree is detached and moved elsewhere in the DOM, you continue to watch the detached segment of nodes, receiving the same callbacks as before the nodes were detached from the original subtree.

In other words, until you've been notified that nodes are being split off from your monitored subtree, you'll get notifications of changes to that split-off subtree and its nodes. This prevents you from missing changes that occur after the connection is severed and before you have a chance to specifically begin monitoring the moved node or subtree for changes.

This means that in theory if you keep track of the MutationRecord objects describing the changes that occur, and , you should be able to "undo" the changes, rewinding the DOM back to its initial state.

Example

Specifications

Browser compatibilityUpdate compatibility data on GitHub