本文分享了js中利用tagname和id獲取元素的3種方法，供大家參考，具體內(nèi)容如下
方法一：整體法，先獲取所有的元素，再通過ai+-b的方法來算出需要的元素
方法二：數(shù)組法，在全局環(huán)境下建立空數(shù)組，遇到需要循環(huán)的結構時，在循環(huán)中獲取元素，并放入數(shù)組
方法三：函數(shù)法，遇到相同的幾組元素時，只操作一組元素，并用函數(shù)傳參來實現(xiàn)所有的效果
具體代碼如下
<!DOCTYPE html><html lang="en"><head><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></head><body><div class="box" id="box"> <h1 class="box-tit">分類名稱</h1> <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的方法來算出需要的元素var oList = document.getElementById('box-list');var aInput = oList.getElementsByTagName('input');var aBtn =oList.getElementsByTagName('button'); for(var i = 0; i < aBtn.length; i++){ aBtn[i].index = i;}for(var i = 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]數(shù)組法，在全局環(huán)境下建立空數(shù)組，遇到需要循環(huán)的結構時，在循環(huán)中獲取元素，并放入數(shù)組var oList = document.getElementById('box-list');var aIn = oList.getElementsByTagName('li');var aInput = [];var aBtnY = [];var aBtnX = [];for(var i = 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]函數(shù)法，遇到相同的幾組元素時，只操作一組元素，并用函數(shù)傳參來實現(xiàn)所有的效果var oList = document.getElementById('box-list');var aIn = oList.getElementsByTagName('li'); function fn(i){ var oInput = aIn[i].getElementsByTagName('input')[0]; var oBtnY = aIn[i].getElementsByTagName('button')[0]; var oBtnX = aIn[i].getElementsByTagName('button')[1]; //確定按鈕 oBtnY.onclick = function(){ oInput.disabled = true; } //取消按鈕 oBtnX.onclick = function(){ oInput.disabled = false; oInput.value = ''; console.log(3); } }for( var i = 0; i < aIn.length; i++){ fn(i);}</script></body></html>希望本文所述對大家學習掌握js獲取元素的方法有所幫助。
新聞熱點
疑難解答
