Home > Developer > Web Develop
<!DOCTYPE html>"en"><meta charset="UTF-8"><title>3种用tagname和id获取元素的方法</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}h1{ margin: 0;}</style><body><div class="box"id="box"> class="box-tit">分类名称 <ul class="box-list"id="box-list"> <li class="box-listI"> <input class="box-listI-input"> <button>保存</button> <button>取消</button> </li> <li class="box-listI"> <input class="box-listI-input"> <button>保存</button> <button>取消</button> </li> <li class="box-listI"> <input class="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‘);function fn(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>3 ways to get elements with tagname and ID in JS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
