title: Difference between document.getElementById and document.getElementsByClassName
body: <p>In particular why does document.getElementsById work here</p>
  
  <pre><code>&lt;div id="move"&gt;add padding&lt;/div&gt;
  
  &lt;button type="button" onclick="movefun()"&gt;pad&lt;/button&gt;
  
  &lt;script&gt;
  function movefun() {
      document.getElementById("move").style.paddingLeft = "50px";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>but document.getElementsByClassName does not work</p>
  
  <pre><code>&lt;div class="move"&gt;add padding&lt;/div&gt;
  
  &lt;button type="button" onclick="movefun()"&gt;Set left padding&lt;/button&gt;
  
  &lt;script&gt;
      function movefun() {
          document.getElementsByClassName("move").style.paddingLeft = "50px";
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have left out the common things like the html and body tag to cut down on code length. </p>