js中利用tagname和id获取元素的方法
本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下
方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素
方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组
方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果
具体代码如下
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>3种用tagname和id获取元素的方法</title> <style> body{ margin:0; } ul{ margin:0; padding:0; list-style:none; } h1{ margin:0; } </style> </head> <body> <divclass="box"id="box"> <h1class="box-tit">分类名称</h1> <ulclass="box-list"id="box-list"> <liclass="box-listI"> <inputclass="box-listI-input"> <button>保存</button> <button>取消</button> </li> <liclass="box-listI"> <inputclass="box-listI-input"> <button>保存</button> <button>取消</button> </li> <liclass="box-listI"> <inputclass="box-listI-input"> <button>保存</button> <button>取消</button> </li> </ul> </div> <script> //[1]整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素 varoList=document.getElementById('box-list'); varaInput=oList.getElementsByTagName('input'); varaBtn=oList.getElementsByTagName('button'); for(vari=0;i<aBtn.length;i++){ aBtn[i].index=i; } for(vari=0;i<aInput.length;i++){ //确定按钮 aBtn[2*i].onclick=function(){ aInput[this.index/2].disabled=true; } //取消按钮 aBtn[2*i+1].onclick=function(){ aInput[(this.index-1)/2].disabled=false; aInput[(this.index-1)/2].value=''; console.log(1); } } //[2]数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组 varoList=document.getElementById('box-list'); varaIn=oList.getElementsByTagName('li'); varaInput=[]; varaBtnY=[]; varaBtnX=[]; for(vari=0;i<aIn.length;i++){ aInput[i]=aIn[i].getElementsByTagName('input')[0]; aBtnY[i]=aIn[i].getElementsByTagName('button')[0]; aBtnX[i]=aIn[i].getElementsByTagName('button')[1]; aBtnY[i].index=aBtnX[i].index=i; //确定按钮 aBtnY[i].onclick=function(){ aInput[this.index].disabled=true; } //取消按钮 aBtnX[i].onclick=function(){ aInput[this.index].disabled=false; aInput[this.index].value=''; console.log(2); } } //[3]函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果 varoList=document.getElementById('box-list'); varaIn=oList.getElementsByTagName('li'); functionfn(i){ varoInput=aIn[i].getElementsByTagName('input')[0]; varoBtnY=aIn[i].getElementsByTagName('button')[0]; varoBtnX=aIn[i].getElementsByTagName('button')[1]; //确定按钮 oBtnY.onclick=function(){ oInput.disabled=true; } //取消按钮 oBtnX.onclick=function(){ oInput.disabled=false; oInput.value=''; console.log(3); } } for(vari=0;i<aIn.length;i++){ fn(i); } </script> </body> </html>
希望本文所述对大家学习掌握js获取元素的方法有所帮助。