For better maintenance, this library has been placed along with JsUtilities (https://github.com/knighttower/JsUtility) to create an easier entry point for many resources that will collaborate together --> only the docs will remain here for now.

npm i @knighttower/js-utility-functions

yarn add @knighttower/js-utility-functions

import DomObserver from '@knighttower/js-utility-functions';

It loads as a 'window' object --> window.DomObserver

<script src=" https://cdn.jsdelivr.net/npm/@knighttower/js-utility-functions@latest/dist/browser/DomObserver.min.js"></script>

// ---> Also available as ESM, UMD, CJS, JS // ESM
<script src="https://esm.run/@knighttower/js-utility-functions@latest/index.mjs"></script>
// UMD
<script src="https://cdn.jsdelivr.net/npm/@knighttower/js-utility-functions@latest/dist/umd/DomObserver.min.js"></script>
// CJS
<script src="https://cdn.jsdelivr.net/npm/@knighttower/js-utility-functions@latest/dist/cjs/DomObserver.min.js"></script>

DomObserver is a module designed to detect DOM changes. The module allows you to register callbacks that will be invoked when specific types of changes occur in the DOM, such as addition, deletion, or modification of nodes.

yarn add @knighttower/js-dom-observer

import DomObserver from '@knighttower/js-dom-observer';

or only some modules

import { addOnNodeChange, removeOnNodeChange } from '@knighttower/js-dom-observer';

Registers a callback function that will be invoked whenever a relevant DOM change occurs.

• id: A unique identifier for the callback.
• callback: The function to be executed when a DOM change occurs.

addOnNodeChange('elementIdentifier', () => {
    console.log('Node changed');
});

Removes a previously registered callback function so that it will no longer be invoked when the DOM changes.

• id: The unique identifier for the callback you wish to remove.

removeOnNodeChange('elementIdentifier');

Removes all registered callback functions. Useful for deep cleanup.

cleanup();

The module uses MutationObserver to observe changes to the DOM. The observer is configured to look for changes in child elements (childList) and in the subtree (subtree).

This module is under the MIT License. Created by Knighttower in 2022.