javascript - How to use MutationObserver? -

javascript - How to use MutationObserver? -

i came across awesome mutationobserver feature sort of maintain tracks of changes on dom element. used code shown on mozilla developer network, can't seem create run. code used (link):

// create 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(); - stop observing // test case setinterval(function(){ document.queryselector('#something').innerhtml = math.random(); },1000);

the above code doesn't seems work. if modify same code bit of jquery, seems work fine (demo here). there i'm missing docs or i'm misinterpreting observer feature.

you need subtree: true

http://jsfiddle.net/6jajs/1/

the inner text kid text() element in dom. without subtree watch element itself.

there possible confusion surrounding "characterdata" (https://developer.mozilla.org/en-us/docs/web/api/characterdata), seems that applies nodes straight contain text. dom structured markup elements contain mixed type optionally include kid text node (which in turn implement characterdata, kid of targetted node).

javascript mutation-observers