title: document.querySelectorAll length is always 0
body: <p>I'm trying to create some draggable boxes in javascript. I decided to make an empty class "draggable" in CSS and a "box" class. The code is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;style&gt;
      .draggable
      {
  
      }
      .box
      {
          position: absolute;
          width: 80px; height: 60px;
          padding-top: 10px;
          text-align: center;
          font-size: 40px;
          background-color: #222;
          color: #CCC;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="draggable box"&gt;1&lt;/div&gt;
  &lt;div class="draggable box"&gt;2&lt;/div&gt;
  &lt;div class="draggable box"&gt;3&lt;/div&gt;
  &lt;script&gt;
      var draggableStuff = document.querySelectorAll('draggable');
      var tabLength = draggableStuff.length;
      alert(tabLength);
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>The problem is that tabLength is always zero. I want to get an array filled with all draggable stuff. I'm new to javascript. What have I missed here?</p>