DomCatcher

React to specific changes in the DOM tree.

new DomCatcher('.my-selector');

DomCatcher wraps MutationObserver and makes it user friendly and actually usable. It's designed to make it much easier for developers to "react to changes in a DOM."

Parameters

Param.	Type	Desc.	Required
(1) CSS selector	String	what you're observing	yes
(2) ancestral element	HTMLElement	where you're observing it (defaults to document.body)	no

It is recommended to narrow the observer scope when possible. And in most cases it's best to set this up after your page has rendered.

Methods

• then : accepts only a callback, which receives both added and removed sets of elements in two arguments of arrays
• on : accepts two parameters: 1. event string (add or remove), and 2. callback, which receives one set of elements as an array
• destroy : disconnects the observer and destroys the wrapper instance
• history : getter; provides full history of instance activity

Usage

// example 1
new DomCatcher('.selector, .another-selector', parentElem).then((added, removed) => {});

// -----------------------------------------------
// example 2
let myCatcher = new DomCatcher('#id-selector', parentElem);

myCatcher.on('add', addedArray => {
	if (addedArray[0]){
		myCatcher.destroy();
		alert('Element created!');
	}
});

// -----------------------------------------------
// example 3
new DomCatcher('#selector').on('remove', function(arr){
	if (arr.length) this.destroy();
});

Browser Support

Modern browsers only; that is, no IE support. (The legacy browser is dead!)