title: MutationObserver with specific mutations
body: <p>I am currently trying to use the <a href="https://developer.mozilla.org/en/docs/Web/API/MutationObserver" rel="nofollow">MutationObserver API</a> to fire a message (which later will be functions) based on class change of an element. </p>
  
  <p>I'm currently firing a log on mutation change, but I'm assuming there are mutations such as DOM position etc that are firing. Is there a way to make the <code>MutationObserver</code> only look for specific <code>attributes</code> in this case the <code>class</code>?</p>
  
  <p>As primarily a Drupal developer I'm used to using jQuery and that's why I have the classList function as I like chaining.</p>
  
  <p>Here is my code:</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>var foo = document.getElementById("foo");
  var wrapper = document.getElementById("wrapper");
  
  var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
          if (mutation.attributeName === "class") {
           var attributeValue = mutation.target.getAttribute(mutation.attributeName);
              console.log("Class attribute changed to:", attributeValue);
          }
      });
  });
  
  function classList(el) {
    var list = el.classList;
    return {
        add: function(c) { 
           if (!list.contains(c)){
              console.log('Contains: '+list.contains(c));
             list.add(c); 
           }
           return this;
        },
        remove: function(c) { 
           if (!list.contains(c)){ 
              list.remove(c); 
           }
           return this; 
        }
    };
  }
  
  observer.observe(foo,  {
      attributes: true
  });
  
  wrapper.addEventListener("scroll",function(){
      classList(foo).add('red').remove('yellow');
      if(wrapper.scrollTop &gt; 500){
           classList(foo).add('yellow').remove('red');
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    height: 200px;
    overflow: scroll;
  }
  #foo {
    height: 1000px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
     &lt;div id="foo"&gt;Element&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>