title: Most efficient way to add remove classes with JavaScript
body: <p>I am curious if anyone knows which of these is more efficient, I am only concerned with Firefox as a browser and do not need to know that this code doesn't work in IE, etc...</p>
  
  <p>Basically I am showing and hiding DOM elements based on an input field's value, an instant search if you will. I need to show or hide a "nothing found" element if no search results are shown. I am curious if it is cheaper (more efficient) to check if the "nothing found" element is in the proper state before modifying its class attribute, or to just modify the class attribute. </p>
  
  <p>Question: should I remove/add the hidden class every time the function is run, even if there is no change in the element's class attribute? </p>
  
  <pre><code>if (shown_count &gt; 0) {
      element.classList.add('hidden');
  }
  else {
      element.classList.remove('hidden');
  }
  </code></pre>
  
  <p>or should I check to see if the element needs its class attribute updated before actually updating it?</p>
  
  <pre><code>if (shown_count &gt; 0) {
      if (element.classList.contains('hidden') == false) {
           element.classList.add('hidden');
      }
  }
  else {
      if (element.classList.contains('hidden')) {
           element.classList.remove('hidden');
      }
  }
  </code></pre>