js操作html元素【黑马java培训】

更新时间:2019年07月26日 11时15分46秒来源:黑马程序员论坛

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

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

js操作html元素【黑马java培训】

相关阅读