README
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 arrayson
: accepts two parameters: 1. event string (add
orremove
), and 2. callback, which receives one set of elements as an arraydestroy
: disconnects the observer and destroys the wrapper instancehistory
: 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!)