JavaScript MutationObserver Example

mutationObserver.js

/*

JavaScript MutationObserver

https://caniuse.com/#feat=mutationobserver

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

*/

(function(){
	
	// example initializer
	watchElement(document.querySelector('body'),
		{
			childList : true,
			attributes : true,
			characterData : true,
			subtree : true,
			attributeOldValue : false,
			characterDataOldValue : false
			//attributeFilter : []
		},
		function(mutationsList) {
		    for(var mutation of mutationsList) {
		        if (mutation.type == 'childList') {
		            console.log('A child node has been added or removed.');
					console.log(mutation);
		        }
		        else if (mutation.type == 'attributes') {
		            console.log('The ' + mutation.attributeName + ' attribute was modified.');
					console.log(mutation);
		        }
		    }
		}
	);

	// let's do something for the observer to notice
	var body = document.querySelector("body"),
		newDiv = document.createElement("div");
	newDiv.textContent = 'Hello World';
	body.appendChild(newDiv);
	body.setAttribute('data-testa','a');

	
	// example util
	function watchElement(elem,options,callback){

		// Create an observer instance linked to the callback function
		var observer = new MutationObserver(callback);

		// Start observing the target node for configured mutations
		observer.observe(elem, options);

		// *Later, you can stop observing
		//observer.disconnect();
	}
	
})()