javascript - MutationObserver not working -


consider following code:

var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver;    var observer = new mutationobserver(function(mutations) {    mutations.foreach(function(mutation) {      console.log(mutation.target.nodename);    });  });    observer.observe(document, {    attributes: true,    childlist: true,    characterdata: true  });
<div>    <ol contenteditable oninput="">      <li>press enter</li>    </ol>  </div>

which slight modification of this.

interacting jsbin version page not produce log. wrong? notice if substitute line

  observer.observe(document, { 

with

  observer.observe(document.queryselector('ol'), { 

the script turns on working...

it doesn't appear work because not mutating observing. neither changing

  • attributes (attributes: true) of document node (which understandable, since document doesn't have attributes)
  • child nodes (childlist: true): child node of document <html> node, , not removing or replacing it.
  • character data (characterdata: true): not changing text, comment, or processinginstruction children of document (also understandable because document cannot have such children).

if replace <html> node, can see mutation observer works configured.

var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver;    var observer = new mutationobserver(function(mutations) {    mutations.foreach(function(mutation) {      console.log(mutation.target.nodename);    });  });    observer.observe(document, {    attributes: true,    childlist: true,    characterdata: true  });    document.replacechild(document.createelement('div'), document.documentelement);


what doing changing content of ol element, descendant of document.

if want listen these kind of changes, have set subtree true:

observer.observe(document, {   attributes: true,   childlist: true,   subtree: true,   characterdata: true }); 

more information in mdn documentation.

var mutationobserver = window.mutationobserver || window.webkitmutationobserver || window.mozmutationobserver;    var observer = new mutationobserver(function(mutations) {    mutations.foreach(function(mutation) {      console.log(mutation.target.nodename);    });  });    observer.observe(document, {    attributes: true,    childlist: true,    subtree: true,    characterdata: true  });
<div>    <ol contenteditable oninput="">      <li>press enter</li>    </ol>  </div>


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -