示例html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
width: 100px;
height: 20px;
border: 1px solid red;
margin: 5px auto
}
.green{
width: 100px;
height: 20px;
background: green;
}
</style>
</head>
<body>
# 多个相同id的div标签
<div id="bass" class="red"></div>
<div id="bass" class="red"></div>
<div id="bass" class="red"></div>
<div id="bass" class="red"></div>
<div id="trable" class="red"></div>
<div id="trable" class="red"></div>
<div id="trable" class="red"></div>
<div id="trable" class="red"></div>
<button id="btn">id变色</button>
</body>
</html>
问题描述
在html中,当出现多个标签具备相同的id,我们使用js根据id获取标签时,往往只能单一的获取第一个id的标签。并不能直接获取所有相同id的标签。
# 获取相同id标签的js代码
document.getElementById('bass')
通过以上代码并不能获取多个id=bass的div标签,原因是id的滥用导致的。因为在html中class属性可以被多个标签公用,但是id是唯一的。
解决方法
如果通过id获取div没有任何解决方法,因为js并不支持多个标签拥有同一个id,这里的解决方法无非只是变换了思路:我们可以通过标签名字获取所有的标签然后再遍历并判断标签的id是否为bass。
// 首先获取所有的div,根据的是标签的名字,而不是id
var div_ls = document.getElementsByTagName('div')
// console.log(div_ls)
btn.onclick = function(){
// 设置bass变绿
for(var i=0;i<div_ls.length;i++){
// 遍历所有的div并根据id做判断
if(div_ls[i].getAttribute('id') == 'bass'){
// 对满足条件的标签设置属性即可
div_ls[i].setAttribute('class', 'green')
}
}
}