title: Re: How to target child nodes in HTML collection
body: <p>I am new to programming and this is my first question. The problem I am having is I am trying to use DOM manipulation on all the child nodes of an html collection. I am expecting the nodes to change background color when they are hovered. Here is what I have tried so far:</p>
  <pre><code>
          let x = 0;
  
  do{
      const square = document.createElement(&quot;div&quot;);
  square.className = &quot;squares&quot;;
  square.setAttribute(&quot;id&quot;,&quot;block&quot;);
      document.getElementById(&quot;container&quot;).appendChild(square);
      x++;
  }
  while(x &lt; 16);
  
  var container = document.getElementById(&quot;container&quot;);
  var cells = container.childNodes;
  
  cells.forEach(function(){
  cells.onmouseover = function(){
  cells.style.backgroundColor = &quot;black&quot;;
  }
  });
  console.log(`${cells.length}`);
  </code></pre>
  <p>This doesn't work even though console.log shows 16 child nodes being targeted.</p>
  <pre><code>var container = document.getElementById(&quot;container&quot;);
  var cells = container.children[0];
  cells.onmouseover = function(){
  cells.style.backgroundColor = &quot;black&quot;;
  }
  </code></pre>
  <p>I have tried this and can use index but of course only that cell will change bg color. I want any cell that is hovered to change also.</p>
  <p>I am at a loss for what I am doing wrong here. If anyone can point me in the right direction I would greatly appreciate it.</p>