title: document.getElementsByClassName() for Multiple classes not working correctly
body: <p>I stuck in document.getElementsByClassName() during I optimize my company's codes.</p>
  
  <p><strong>Here is the question:</strong></p>
  
  <p>There are two kinds of pages I am working on:</p>
  
  <p><strong>The first page has:</strong> </p>
  
  <pre><code>&lt;div class="leaderboardad"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p><strong>The second page has:</strong></p>
  
  <pre><code>&lt;div class="leaderboard above_header"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>We can see that the only differences is the classname, but when I want to write a js files to use document.getElementsByClassName() to detect these two div, something happen:</p>
  
  <pre><code>if(document.getElementsByClassName('leaderboard above_header')){
     console.log("2 classes");
  }else if(document.getElementsByClassName('leaderboardad')){
    console.log("1 class");
  }
  </code></pre>
  
  <p><strong>This code works fine for second page, I always get the "2 classes" in console for first page.</strong></p>
  
  <p>Then when I change the code to</p>
  
  <pre><code>if(document.getElementsByClassName('leaderboardad')){
     console.log("1 class");
  }else if(document.getElementsByClassName('leaderboard above_header')){
    console.log("2 classes");
  }
  </code></pre>
  
  <p><strong>This code works fine for the first page, but I always get "1 class" in console on second page.</strong></p>
  
  <p>Suppose we can not change the classname in the pages, what can I do for this situation?</p>