A MutationObserver on steroids.
npm install domobserverjsDomObserver 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.
- 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.
``bash`
npm i domobserverjs
yarn add domobserverjs
#### Import the DomObserverController`javascript`
import DomObserverController from 'domobserverjs';
#### Assign the DomObserverController to the window`javascript`
window.DomObserver = new DomObserverController;
#### Observing Elements
`javascript`
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
`javascript`
DomObserver.observe('.my-class', (elements) => {
elements.forEach((element) => {
console.log('New element found!', element);
});
}, {
childList: true,
subtree: true,
});
The default callback for each DOM observer is:
`javascript`
(items) => console.log('DomObserver:', items);
The default settings for each DOM observer are:
`javascript``
{
childList: true,
subtree: true,
};