Track DOM Changes Using The watchMyDom Library

Category: Javascript | November 18, 2020
Author: saifKeralite
Views Total: 46 views
Official Page: Go to website
Last Update: November 18, 2020
License: MIT

Preview:

Track DOM Changes Using The watchMyDom Library

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();

You Might Be Interested In:


Leave a Reply