Javascript - Accessing element values? DOM tree?

I have a form with multiple text input fields and sub-forms. Is there a way to access everything based on how it appears in the DOM tree?

In other w开发者_运维问答ords, if I have

<div id="formContent">
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
    <input type="text" value="some stuff" />
    <ul>
        <li>
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
            <input type="text" value="some sub-stuff" />
        </li>
    </ul>
</div>

Can I access those in the order they appear and assign them values?

EDIT: The reason I ask is because I will be allowing people to add and remove the main and sub-forms, so I can't assign them id's. I also won't know how many sub-options each form will have.

---

Assuming they're wrapped in a <form> tag (which we can't see here), you can access them via the elements[] array. This does the job when you don't have id attributes to work with via getElementById()

// Supply the correct index - 0 assumes this is the first form on the page...
var yourForm = document.forms[0];

// Loop over the form elements
for (var i=0; i < yourForm.elements.length; i++) {
  yourForm.elements[i].value = "some new value";
}

Here it is in action: http://jsfiddle.net/DLrCY/

---

Yes, you can get a list of children of the div element with id formContent, then iterate through that array.

var div = document.getElementById("formContent");
for(var i = 0; i < div.childNodes.length; i++) {
    // do something with this element;
}

Note that this is going to return ALL of the direct children of the div (including the lists), so you'll need to do some extra processing and some additional traversal to handle those and get the input elements contained within them.

---

If you need the solution in JQuery it would be like that.

$('div > input[type=text]').each(function(){
  this.value = "some new value";
});

---

Edit

If you need the solution in simple JS you will be doing like this.

var yourForm = document.forms[0];

// Loop over the form elements
for (var i=0; i < yourForm.elements.length; i++) {
  if( /^text/.test( els[j].type ) ){// check for text boxes
    yourForm.elements.value = "new Value";
  }
}

---

var get_div = document.getElementsByTagName("*");

 for( var i=0; i<get_div.length; i++ )// total no of child including all node ex:text,element
  {
 var child_length=get_div[i].childNodes.length;    // to get child of particular node. 
 for( j=0; j<child_length; j++ )
     {
       some code;;;
     }
  }