onsa
12/17/2016 - 12:11 AM

Run custom code when the DOM changes

Run custom code when the DOM changes

var observeMutation = function() {
	// new mutation observer instance
	var newObserver = new MutationObserver(function(mutations) {
		mutations.forEach(function(mutation) {
			// display mutation type
			console.log(mutation.type);
			// display what element has changed
			console.log(mutation.target);
			// display the list of added nodes
			console.log(mutation.addedNodes);
			// display the list of removed nodes
			console.log(mutation.removedNodes);
			// display the previous sibling of the added or removed nodes
			console.log(mutation.previousSibling);
			// display the next sibling of the added or removed nodes
			console.log(mutation.nextSibling);
			// display the value before the change
			console.log(mutation.oldValue);
			// do other things when the right mutations happen
    });
	});

	// observer settings; any target can be selected in lieu of document
	newObserver.observe(document, {
		// additions and removals of the target node's child elements (including text nodes) are observed
		childList: true,
		// also target's descendants are observed
		subtree: true,
		// mutations to target's attributes are observed
		attributes: true,
		// mutations to target's data are observed
		characterData: true
	});
};