title: Got multiple elements with getElementsByName, Changing their names gets weird results
body: <p>I have a form with multiple input(text) elements with the same name</p>
  
  <pre><code>&lt;input name="val[]" type="text" /&gt;
  &lt;input name="val[]" type="text" /&gt;
  &lt;input name="val[]" type="text" /&gt;
  </code></pre>
  
  <p>Now, say I want to change their names to "val2[]".</p>
  
  <p>This is what I originally wrote:</p>
  
  <pre><code>var vals=document.getElementsByName("val[]");
  var valct=vals.length;
      for( var i=0; i&lt;valct; i++ )
          vals[i].name="val2[]";
  </code></pre>
  
  <p>However this seems to be getting me an error.<br>
  From Chrome's developer tool it says "Cannot set property 'name' of undefined"</p>
  
  <p>After thinking for some time, I figured that the element might be deleted after renaming.<br>
  Therefore, I changed the last line of the code to:</p>
  
  <pre><code>vals[ 0 ].name="val2[]";
  </code></pre>
  
  <p>And this works !</p>
  
  <p>But then, I was thinking if I could code it this way:</p>
  
  <pre><code>while( vals=document.getElementsByName("val[]") )
      vals[0].name="val2[]";
  </code></pre>
  
  <p>This gives me the same error I got above "Cannot set property 'name' of undefined"<br>
  I am puzzled. I also tested it with Firefox and the results were the same. (cannot test on IE because I use HTML5 native DnD on the page)  </p>
  
  <p>It seems to me that what getElementsByName returns is a queue while changing names acts as removing items from one.<br>
  Is this true? or what is the correct explanation for this ?</p>