js中用tagname和id获取元素的3种方法
生活随笔
收集整理的這篇文章主要介紹了
js中用tagname和id获取元素的3种方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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]數組法，在全局環境下建立空數組，遇到需要循環的結構時，在循環中獲取元素，并放入數組 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]函數法，遇到相同的幾組元素時，只操作一組元素，并用函數傳參來實現所有的效果 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>
轉載于:https://www.cnblogs.com/zhaolizhe/p/6953962.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的js中用tagname和id获取元素的3种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sqlite insert or rep
- 下一篇： 理解css伪类和伪元素