I have a subset of form items that I need to perform different
operations on (enable/disable, clear values, change style, etc)
rather than hard code the IDs or names I would like to recursively
search a parent element(in my case a <table>) and search for elements
of a certain type (<input>, <textarea>, etc) and perform operations on
them.
I've done some initial googling and found PLENTY of samples of
disabling all form items, but I need to work on a subset.
I'm also very new to the DOM and am not sure how to do type checking (
IE: if(item is type(input)) )
The best way of course depends on what you are actually trying to to.
You can use a reference to the table (say by document.getElementById()
) then use the getElementsByTagName method of the table element, but
you'd have to get all the tags with names that might be form controls,
such as: button, input, textarea, select and object. Something like
(untested):
var table = document.getElementById('tableID');
var tagNames = ['button', 'input', 'textarea', 'select', 'object'];
var i = tagNames.length
var j, tagCollection;
var elementArray = [];
while (i--){
tagCollection = table.getElementsByTagName(tagNames
);
j = tagCollection.length;
while (j--){
elementArray.push(tagCollection[j]);
}
}
/* elementArray is all the elements that are descendents of the
table element and that can be form controls, but there is no
guarantee that they actually belong to the form
*/
Another way is to give each control of a certain group a class name
that you can filter on, then use the form's elements collection to
iterate over all the form controls and do stuff only to those with a
certain class name.
var el, els = document.forms['formName'].elements;
for (var i=0, len=els.length; i<len; i++){
el = els;
if (el.className && 'someClass' == el.className){
/* do something with el */
}
}
You could also create a 'testIsChildOf' function that checks to see if
a particular element is a child of the table element previously noted:
function testIsChildOf(el, parent){
while (el.parentNode){
if (el.parentNode == parent) {
return true;
}
el = el.parentNode;
}
return false;
}
var table = document.getElementById('tableID');
var el, els = document.forms['formName'].elements;
for (var i=0, len=els.length; i<len; i++){
el = els;
if (testIsChildOf(el, table)){
/* do something with el */
}
}
Lastly, you could get all the elements in the table and see which ones
belong to the form:
var table = document.getElementById('tableID');
var form = document.forms('formName');
var el, els = table.getElementsByTagName('*');
for (var i=0, len=els.length; i<len; i++){
el = els;
if (el.form && form == el.form){
/* do something with el */
}
}
Note that getElementsByTagName('*') is not supported in IE 5 and
earlier I think, you may have to use feature detection and document.all
for older IE. All untested of course, but it should give you some
ideas - the class filter and testIsChildOf methods seem best to me as
they (probably) iterate over the fewest number of elements. 
