MutationObserver API Demo

The MutationObserver API provides the ability to watch for changes being made to the DOM tree, including child elements, attributes, and text content.

MutationObserver: checking...

Observer Configuration

Configure what types of mutations to observe:

Child List Watch for added/removed child nodes

Attributes Watch for attribute changes

Character Data Watch for text content changes

Subtree Include descendant nodes

Start ObserverStop ObserverInactive

Mutation Statistics

0

Child List Mutations

0

Attribute Mutations

0

Character Data Mutations

Reset Statistics

Child List Mutations

Add, remove, or modify child elements:

Add ChildRemove Last ChildClear All

Initial Element 1

Initial Element 2

Attribute Mutations

Modify element attributes:

Toggle ClassChange StyleSet Data Attribute

Watch my attributes change!

Character Data Mutations

Edit the text content below (click to edit):

Edit this text to trigger characterData mutations. Try typing, deleting, or pasting text!

Batch Mutations

Perform multiple mutations at once:

5 Mutations10 Mutations25 Mutations

Event Log

Mutation events will appear here... Clear Log