title: How to detect DOM element mutations without jQuery
body: <p>Let's say I have the following HTML:</p>
  
  <pre><code>&lt;div id='content'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'd like to be alerted when height mutations occur on this element. I was hoping the <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" rel="nofollow">MutationObserver</a> class would help in this, but here is my problem with it:</p>
  
  <pre><code>document.querySelector('#content').style.height = '100px'
  </code></pre>
  
  <p>It triggers my callback like expected, however normal user interactions won't trigger this, e.g., <a href="http://jsfiddle.net/wq4q9/2/" rel="nofollow">http://jsfiddle.net/wq4q9/2/</a></p>
  
  <p>My <strong>question</strong> is, what is the best modern approach for checking if an element's height has changed?</p>
  
  <p>No jQuery please.</p>