title: Using getElementsByTagName to select all divs
body: <p>I am working on a project where I can only use JS to manipulate an HTML file. I am wanting to change the background color of all divs within the HTML and I currently have the following. </p>
  
  <pre><code>//Highlight Function
  
  function highlight(e) {
    e.target.style.backgroundColor = "orange";
  }
  
  function unhighlight(e) {
    e.target.style.backgroundColor = "green";
  }
  
  function init() {
    //Mouseover
    var divs = document.getElementsByTagName("div")[0];
    divs.addEventListener('mouseover', highlight, false);
    divs.addEventListener('mouseout', unhighlight, false);
  }
  window.addEventListener("load", init, false);
  </code></pre>
  
  <p>The HTML looks like this </p>
  
  <pre><code>&lt;div id="div1"&gt;&lt;/div&gt;
  &lt;div id="div2"&gt;&lt;/div&gt;
  &lt;div id="div3"&gt;&lt;/div&gt;
  &lt;div id="div4"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Obviously the current code only changes one of the divs, how do get it to select all of the divs by only manipulating the JS</p>