Track DOM Changes Using The watchMyDom Library

Preview:

Description:

watchMyDom is a JavaScript library that tracks DOM changes and triggers a callback function when a DOM element has been changed.

Based on MutationObserver API, which is an underlying web API that provides the ability to watch for changes being made to the DOM tree.

How to use it:

1. Download and include the watchmydom.js from the build folder.

<script src="build/watchmydom.js"></script>

2. Initialize the watchMyDom and determine the element in which you want to track DOM changes.

<div id="example"></div>

var watchIt = new watchMyDom("#example");

3. Trigger a function when the DOM changes. Parameters:

• result: Sorted observations
• info: Complete observations

watchIt.watch(function (result, info) {
  alert('dom added');
});

4. Start the observer.

watchIt.watch();

5. Stop the observer.

watchIt.stop();