How to use MutationObserver?

I recently came across this awesome MutationObserver feature which sort of keep tracks of the changes on any dom element. I used the code that was shown on the mozilla developer network, but can't seem to make it run. This is the code I used (link):

 // create an observer instance
var target = document.querySelector('#something');
console.log(target);
var observer = new WebKitMutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log("Success"); //$('#log').text('input text changed: "' + target.text() + '"'); //console.log(mutation, mutation.type); });
});
observer.observe(target, { attributes: true, childList: true, characterData: true });
//observer.disconnect(); - to stop observing
// test case
setInterval(function(){ document.querySelector('#something').innerHTML = Math.random();
},1000);

The above code doesn't seems to work. However if I modify the same code with a bit of jQuery, everything seems to work just fine (Demo here). Is there something I'm missing from the docs or I'm just misinterpreting the observer feature.

0

3 Answers

You need subtree: true

The inner text would normally be a child text() element in the DOM. Without the subtree it will only watch the element itself.

There is possible confusion surrounding "characterData" (), but it seems that that applies only to nodes that directly contain text. The DOM is structured so that most markup elements contain mixed type which optionally include a child text node (which in turn would implement characterData, but would be a child of the targeted node).

2

Simple Example:

<div contentEditable>MUST EDIT NOW</div>
<script>
let x = new MutationObserver( function(){ alert('DETECTED'); } );
x.observe( myID , {subtree:true,characterData:true} );
</script>

See Example Live:

To Watch Text or Input changes

use

characterData: true

Example:

var target = document.querySelector('#text');
var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); });
});
var config = { characterData: true, subtree: true,
};
observer.observe(target, config);
// otherwise
observer.disconnect();
observer.observe(target, config);

<div contenteditable="true">characterData:true</div>

To Watch Child or Append Text or Inserting Dom

childList:true

Example:

var target = document.querySelector('#text');
var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); });
});
var config = { childList: true, subtree: true, };
observer.observe(target, config);
// otherwise
observer.disconnect();
observer.observe(target, config);

<div contenteditable="true">characterData:true</div>
<button onclick="testappend();
function testappend(){
document.getElementById('text').append('tesxt')
}">append</button>

To Watch dom Attributes

 attributes: true

Example

var target = document.querySelector('#text');
var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); });
});
var config = { characterData: true, attributes: true,
};
observer.observe(target, config);
// otherwise
observer.disconnect();
observer.observe(target, config);

<div contenteditable="true">characterData:true</div>
<button onclick="testappend();
function testappend(){
document.getElementById('text').classList.add('tesxt')
}">add class</button>
<button onclick="setat();
function setat(){
document.getElementById('text').setAttribute('data-prop','text')
}">set attribute</button>

attribute old value

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy