獲取dom中多個同名id的元素
阿新 • • 發佈：2018-12-17
示例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 問題描述
在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')
}
}
}