js中利用tagname和id獲取元素的方法
本文分享了js中利用tagname和id獲取元素的3種方法,供大家參考,具體內容如下
方法一:整體法,先獲取所有的元素,再通過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獲取元素的方法有所幫助。
相關文章
最簡單純JavaScript實現(xiàn)Tab標簽頁切換的方式(推薦)
這篇文章主要介紹了最簡單純JavaScript實現(xiàn)Tab標簽頁切換的方式(推薦)的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07JavaScript前端面試扁平數(shù)據(jù)轉tree與tree數(shù)據(jù)扁平化
這篇文章主要為大家介紹了JavaScript面試中扁平數(shù)據(jù)轉tree以及tree數(shù)據(jù)扁平化示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06JS使用ActiveXObject實現(xiàn)用戶提交表單時屏蔽敏感詞功能
這篇文章主要介紹了JS采用ActiveXObject實現(xiàn)用戶在提交表單時屏蔽敏感詞的功能的相關資料,需要的朋友可以參考下2017-06-06如何通過遞歸方法實現(xiàn)用json-diff渲染json字符串對比結果
JsonDiff是一個高性能json差異發(fā)現(xiàn)工具,它幾乎可以發(fā)現(xiàn)任何JSON結構的差異,并且將錯誤信息反饋給用戶,下面這篇文章主要給大家介紹了關于如何通過遞歸方法實現(xiàn)用json-diff渲染json字符串對比結果的相關資料,需要的朋友可以參考下2022-12-12JS實現(xiàn)手機號脫敏、郵箱脫敏、身份證號脫敏、姓名脫敏等常見脫敏代碼示例
這篇文章主要給大家介紹了關于JS實現(xiàn)手機號脫敏、郵箱脫敏、身份證號脫敏、姓名脫敏等常見脫敏的相關資料,脫敏的目的是保護用戶隱私,一種常見的方式是顯示部分字符,用星號或其他字符替代,需要的朋友可以參考下2024-02-02webpack4 SplitChunks實現(xiàn)代碼分隔詳解
這篇文章主要介紹了webpack4 SplitChunks實現(xiàn)代碼分隔詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05基于JavaScript實現(xiàn)全選、不選和反選效果
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)全選、不選和反選效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02微信小程序實戰(zhàn)篇之購物車的實現(xiàn)代碼示例
本篇文章主要介紹了微信小程序實戰(zhàn)篇之購物車的實現(xiàn)代碼示例,詳細的介紹了購物車的功能實現(xiàn),具有一定的參考價值,有興趣的可以了解一下2017-11-11