Loading challenge...
Mutation Observer
Detect DOM mutations
Observer Controls
Control the mutation observer
Total mutations: 0
Observed Container
Modify elements to trigger mutations
Dynamic List (childList)
- Item 1
- Item 2
- Item 3
Attribute Changes
class="default" data-value="0"
Text Content Changes
Original text content
Mutation Log
Recorded DOM mutations
Make changes to see mutations logged
Mutation Types Reference
Types of mutations you can observe
childList
Triggered when child nodes are added or removed
attributes
Triggered when element attributes change
characterData
Triggered when text content changes
Testing Tips
Automation hints
- ✓ Verify mutation log updates after DOM changes via button clicks
- ✓ Test childList mutations by adding/removing list items
- ✓ Check attribute mutations by toggling and verifying data-value changes
- ✓ Use mutation-count element to verify total mutation count
- ✓ Test observer pause/resume by toggling and verifying log stops updating
