js中利用tagname和id获取元素的方法

更新时间：2026-02-18 21:02:58作者：fang

本文分享了js中利用tagname和id获取元素的3种方法，供大家参考，具体内容如下

方法一：整体法，先获取所有的元素，再通过ai+-b的方法来算出需要的元素

方法二：数组法，在全局环境下建立空数组，遇到需要循环的结构时，在循环中获取元素，并放入数组

方法三：函数法，遇到相同的几组元素时，只操作一组元素，并用函数传参来实现所有的效果

具体代码如下

<!DOCTYPE html>

<head>

<title>3种用tagname和id获取元素的方法</title>

<style>

body{

margin: 0;

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

h1{

margin: 0;

}

</style>

</head>

<body>

</li>

</li>

</li>

</ul>

</div>

//[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>

希望本文所述对大家学习掌握js获取元素的方法有所帮助。