受打击后的疯狂---------js操作html元素

<form name="form1" id="form1">

<table id="tab" border="1px" style="border-collapse:collapse;">

<caption>测试</caption> 

<tr>

<td>11</td>

<td>12</td>

<td>13</td>

</tr>

<tr>

<td>22</td>

<td>23</td>

<td>24</td>

</tr>

<tr>

<td>31</td>

<td>32</td>

<td>33</td>

</tr>

</table>

</form>

<form name="form2" id="form2">

<input type="button" name="btn1" id="btn1" value="btn1"><br/>

<input type="text" name="text1" id="text1"><br/>

<input type="file" name="file1" id="file1"><br/>

<input type="radio" name="sex" id="male" value="1" checked>male<br/>

<input type="radio" name="sex" id="female"  value="2">female<br/>

<input type="checkbox" name="checkbox" id="bike">bike<br/>

<input type="checkbox" name="checkbox" id="car">car<br/>

<a href="#">测试</a><br/>

<img src=""/><br/>

<input type="submit" name="" id=""/><br/>

<select name="" id="select">

<option value="0">请输入</option>

<option value="1">北京</option>

<option value="2">上海</option>

</select><br/>

<textarea rows="" cols="" name="" id=""></textarea><br/>

<input type="submit" value="submit">

</form>

<script type="text/javascript">

/*******************************

一、操作form

********************************/

var form1 = document.forms["form1"];

var form2 = document.forms[1];
        或var form1 = document.forms.form1;

     alert(form1);

alert(form1.name);

alert(form2.id);

alert(document.forms.length);

/*******************************

二、操作table

********************************/

var table1  = document.getElementById("tab");

alert(table1);

var trs = table1.rows;

for(var i=0;i<trs.length;i++){

document.write(trs.length+"\n");

var tds = trs[i].cells;

for(var j=0;j<tds.length;j++){

alert(tds[j].firstChild.nodeValue);

}

}

/*******************************

三、操作textfield

********************************/

var text1 = document.getElementById("text1");

alert(text1.value);

/*******************************

四、操作radio

********************************/

var radios = document.getElementsByName("sex");

alert(radios.length);

for(var i=0;i<radios.length;i++){

if(radios[i].checked){ 

alert(radios[i].value);

break;

}

}

/*******************************

五、操作checkbox

********************************/

var checkboxs = document.getElementsByName("checkbox");

alert(checkboxs.length);

/*全选*/

for(var i=0;i<checkboxs.length;i++){

checkboxs[i].checked = true;

}

/*全不选*/

for(var i=0;i<checkboxs.length;i++){

checkboxs[i].checked = false;

}

/*反选*/

for(var i=0;i<checkboxs.length;i++){

checkboxs[i].checked = !checkboxs[i].checked;

}

/*******************************

六、操作select

********************************/

var select = document.getElementById("select");

var options = select.options;

var currSelectIndex = select.selectedIndex;

alert(select.value);

alert(options.length);

alert(options[currSelectIndex].value+options[currSelectIndex].text);

/*设置默认选中项*/

for (var i = 0; i < options.length; i++) {        

       if (options[i].text == "北京") {        

           options[i].selected = true;        

           break;        

       }        

}  

/*删除某项*/

options.remove(0);

/*添加某项*/

options.add(new Option("请输入",0)); 
        /*******************************

七、操作image

********************************/

       var images = document.images;

       for(var i=0;i<images.length;i++){

           //alert(images[i].src);

       }

       var img1 =  document.images.img1;

       alert(img1.src);

</script>