title: Using querySelectorAll to change the style property of multiple elements
body: <p>I have the following function which when triggered will make a DIV become semi-transparent.</p>
  
  <pre><code>function changeOpacity(el) {
      var elem = document.getElementById(el);
      elem.style.transition = "opacity 0.5s linear 0s";
      elem.style.opacity = 0.5;
  }
  </code></pre>
  
  <p>However I would like this function to apply to several DIVs simultaneously. I tried giving each DIV the same class name and then using <code>getElementsByClassName</code> but couldn't figure out how to implement it.</p>
  
  <p>Would <code>querySelectorAll</code> be more appropriate and if so how would I implement it?</p>