DOM recursive traversal?

[ChrisOSX]

Is there any way once I've done something like:

var newFields = document.getElementById('myDiv').cloneNode(true);
var newField = newFields.childNodes;

To recursively walk through and change the names of every form element found? Similar to:

var theName = newField[i].name;		
if (theName) newField[i].name = theName + "[" + fCounter + "]";

I need the counters because my users can add multiple new fields to the form, and perhaps delete one out of order. (They add 3 blocks of fields and delete the 2nd one.) For formating purposes I have some <div>s in my cloned node and I can't get to the form elements inside these divs. Here's some simplified markup to illustrate what I have:

<div class="readroot">
  <input type="text" name="product" value="" />
  <div class="date">
    <select name="date">
      <option value="1">December</option>
      ...
    </select>
  </div>
</div>

On my processing page, I get:

product[1] = "some value"
date = "December"

product[2] = "another value"
date = "December"

product[4] = "yet another value"
date = "December"

Thanks in advance for any pointers!

[ChrisOSX]

Just wanted to give credit where credit is do. The original concept of this was found at http://www.quirksmode.org/dom/domform.html done by ppk.