OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

MutationObserver not working

  • Thread starter Thread starter tic
  • Start date Start date
T

tic

Guest
Consider the following code:


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

Code:
<div>
  <ol contenteditable oninput="">
    <li>Press enter</li>
  </ol>
</div>

which is a slight modification of this.

Interacting with the jsbin version page does not produce any log. Where am I wrong? Notice that if I substitute line

Code:
  observer.observe(document, {

with

Code:
  observer.observe(document.querySelector('ol'), {

the script turns on working...

<p>Consider the following code: </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div>
<ol contenteditable oninput="">
<li>Press enter</li>
</ol>
</div></code></pre>
</div>
</div>
</p>

<p>which is a slight modification of <a href="https://hacks.mozilla.org/2012/05/d...-changes-without-killing-browser-performance/" rel="noreferrer">this</a>. </p>

<p>Interacting with the <a href="http://jsbin.com/hivivaboxa/1/edit?html,js,console,output" rel="noreferrer">jsbin version</a> page does not produce any log. Where am I wrong? Notice that if I substitute line </p>

<pre><code> observer.observe(document, {
</code></pre>

<p>with</p>

<pre><code> observer.observe(document.querySelector('ol'), {
</code></pre>

<p>the script turns on working...</p>
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top