title: MutationObserver - getting "TypeError: MutationObserver.observe: Argument 1 does not implement interface Node."
body: <p>I'm trying to detect the height of an element set dynamically by an image slider plugin and use it to set the height of a container.</p>
  <p>Getting &quot;TypeError: MutationObserver.observe: Argument 1 does not implement interface Node.&quot;</p>
  <p>I checked <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow noreferrer">MutationObserver documentation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit" rel="nofollow noreferrer">its options</a>. Saw that</p>
  <blockquote>
  <p>At a minimum, one of childList, attributes, and/or characterData must be true when you call observe(). Otherwise, a TypeError exception will be thrown.</p>
  </blockquote>
  <p>and I am setting attributes to true but still getting the typeError</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($){
    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
        for(const mutation of mutationsList) {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    };
  
    const observer = new MutationObserver(callback);
  
    //set up your configuration
    const config = { attributes:true, subtree: false };
  
    var changingContainer = $('.soliloquy-viewport');
  
    //start observing
    observer.observe(changingContainer, config);
    
    //change height on button press
    function changeHeight(){
      changingContainer.height(Math.floor((Math.random() * 100) + 20));
    }
    $("#height").click(changeHeight);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.soliloquy-viewport{
    background: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="soliloquy-viewport"&gt;
    Hello
  &lt;/div&gt;
  &lt;button id="height"&gt;
  change height
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>