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

Inactive

Mutation Statistics

Child List Mutations

Attribute Mutations

Character Data Mutations

Child List Mutations

Add, remove, or modify child elements:

Initial Element 1

Initial Element 2

Attribute Mutations

Modify element attributes:

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:

Event Log

Mutation events will appear here...