<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> |
|