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
});
};