DomObserver

DomObserver is a JavaScript class that allows you to observe changes in the DOM and execute callbacks when specific elements are added. It uses the MutationObserver API to monitor changes and provides a convenient way to manage multiple observers and their associated callbacks.

Features

• Automatic DOM observation: Automatically observe changes in the DOM and execute callbacks when new elements matching a selector are added.
• Customizable settings: Customize the settings for each observer. New observers are only created when their settings do not match an existing Observer's settings.
• Efficient updates: Efficiently update the observed elements using a caching mechanism.

Installation

npm i domobserverjs
yarn add domobserverjs

Usage

Import the DomObserverController

import DomObserverController from 'domobserverjs';

Assign the DomObserverController to the window

window.DomObserver = new DomObserverController;

Observing Elements

DomObserver.observe('.my-class', (elements) => {
    elements.forEach((element) => {
        console.log('New element found!', element);
    });
});

You may optionally pass a 3rd argument to define any MutationObserver options

Custom Observer Options

DomObserver.observe('.my-class', (elements) => {
    elements.forEach((element) => {
        console.log('New element found!', element);
    });
}, {
  childList: true,
  subtree: true,
});

Default Settings

The default callback for each DOM observer is:

(items) => console.log('DomObserver:', items);

The default settings for each DOM observer are:

{
  childList: true,
  subtree: true,
};

License

MIT