本文主要是介绍《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现
我们都知道getElementById是通过id来获取对象,但是,当我们的对象许多且这些对象都是相同的时候,如果还使用getElementById来一个一个的来获取对象就比较坑爹了,是吧,因此,就有了getElementsByTagName来通过标签来获取对象数组。
例如:var aBtn=document.getElementsByTagName(“input”);就是获取input下的type=”button”的button对象数组。
还是以一个例子来进行说明:
在我们的生活中,许多网页都存在“全选” “反选” “取消”等功能,下面我们就来实现这一功能。
思路比较简单,
实现代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script>window.onload=function (){//得到所有的button对象var oDiv=document.getElementById('div1');var aBtn=oDiv.getElementsByTagName('input');//得到所有的checkbox对象oDiv=document.getElementById('div2');var aCheckBox=oDiv.getElementsByTagName('input');for(var i=0;i<aBtn.length;i++){aBtn[i].onclick=function (){if(this.value==="全选") //注意:这里不能写aBtn[i]==="全选"{for(var j=0;j<aCheckBox.length;j++){aCheckBox[j].checked=true;}}else if(this.value==='取消'){for(var j=0;j<aCheckBox.length;j++){aCheckBox[j].checked=false;}}if(this.value==='反选'){for(var j=0;j<aCheckBox.length;j++){if(aCheckBox[j].checked==true){aCheckBox[j].checked=false;}else{aCheckBox[j].checked=true;}}}}; //注意:这里有一个分号}};</script></head><body><div id="div1"><input type="button" value="全选" /><input type="button" value="反选" /><input type="button" value="取消" /></div><div id="div2"><input type="checkbox" checked="true"/><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /></div></body></html>
在上面的代码实现中,遇到了一个问题,刚开始我在每个按钮的onclick事件中使用了aBtn[i].value====”全选”这样的语句,发现这样是不行的,错误的,只能使用this.value===”全选”,这就涉及到this关键字的使用了,这个以后再说
在debug的过程中,由于一致没有找出这个错误,因此,就写了下面这个版本:每个按钮的onclick都对应一个function。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><script>window.onload=function (){var oBtn1=document.getElementById('btn1');var oBtn2=document.getElementById('btn2');var oBtn3=document.getElementById('btn3');var oDiv=document.getElementById('div2');var aCheckBox=oDiv.getElementsByTagName('input');var len=aCheckBox.length;//全选oBtn1.onclick=function (){for(var i=0;i<len;i++){aCheckBox[i].checked=true;}};//反选oBtn2.onclick=function (){for(var i=0;i<len;i++){if(aCheckBox[i].checked==true){aCheckBox[i].checked=false;}else{ aCheckBox[i].checked=true;}}};//取消oBtn3.onclick=function (){for(var i=0;i<len;i++){aCheckBox[i].checked=false;}};};</script></head><body><input id="btn1" type="button" value="全选" /><input id="btn2" type="button" value="反选" /><input id="btn3" type="button" value="取消" /><div id="div2"><input type="checkbox" checked="true"/><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /><input type="checkbox" /><br /></div></body></html>
小结
例子虽然简单,但遇到的bug还是挺难让人发现的也,可能还是自己对js了解的不够吧
这篇关于《JavaScript学习笔记四》:getElementsByTagName的使用以及全选、反选和取消功能实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!