title: TypeError: node.setAttribute is not a function
body: <p>I'm getting an error: "TypeError: item.setAttribute is not a function" when I try to call the following function on my webpage:</p>
  
  <pre><code>function list() {
      var colors = document.getElementById('colors');
      var colors = colors.childNodes.length;
      for (var i = 1; i &lt; broj; i++) {
          var item = colors.childNodes.item(i);
          item.setAttribute("id", i);
          item.setAttribute("onmouseover", "moveover(src)");
          item.setAttribute("alt", "Color");
          item.hspace = "2";
          item.height = "23";
      }
  }
  
  function moveover(colorAddress) {
      var source = colorAddress;
      var image = source.slice(0, source.length - 4);
      var start = "url(";
      var extension = ".jpg)";
      var newImage = start.concat(image, extension);
      document.getElementById('image').style.backgroundImage = newImage;
  }
  
  window.onload = function() {
      try {
          list();
      } catch (err) {
          alert(err);
      }
  }
  </code></pre>
  
  <p>The <code>mouseover()</code> function is a helper function for the <code>list()</code> function that should fire when the event <code>onmouseover</code> attribute is added to the element in the <code>list()</code> function.</p>
  
  <p>When I load my page the alert box pops up and gives me the above mentioned error.</p>
  
  <p>It's actually adding all the attributes to my elements but I don't understand why this error is showing up. Because this error is triggering it's preventing me from running another function right after this one loads.</p>
  
  <p>Why is this error showing up?</p>
  
  <p>Here is the HTML document I'm trying to manipulate:</p>
  
  <pre><code>&lt;div id="image" style="background-image: url(images/nova_brilliant/1.jpg)"&gt;&lt;/div&gt;
  &lt;div id="tekst"&gt;
       &lt;h1&gt;Nova Brilliant&lt;/h1&gt;
  
      &lt;div id="contents"&gt;
          &lt;p&gt;Hover with your mouse over the desired color to see the kitchen in that color:&lt;/p&gt;
          &lt;div id="colors"&gt;
              &lt;img src="images/nova_brilliant/1.gif"&gt;
              &lt;img src="images/nova_brilliant/2.gif"&gt;
              &lt;img src="images/nova_brilliant/3.gif"&gt;
          &lt;/div&gt;
          &lt;p&gt;Other available colors:&lt;/p&gt;
          &lt;div id="others"&gt;
              &lt;img src="images/nova_brilliant/4.gif"&gt;
              &lt;img src="images/nova_brilliant/5.gif"&gt;
              &lt;img src="images/nova_brilliant/6.gif"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When a user hovers with their mouse over one of the 3 images in the div with <code>id="colors"</code> the background image in the div with <code>id="image"</code> should change and it really does change, it's just that I get that annoying error which prevents me from running another script as soon as this one loads.</p>