JavaScript Uncaught TypeError: xxx.setAttribute is not a functionの解決方法

2023年7月24日

環境
Google Chrome　 114.0.5735.199（Official Build） （64 ビット）
Windows 11 Pro 64bit

操作例
クラス"city"を指定してidを追加します

修正前

<div class="city">tokyo</div>
<div class="city">oosaka</div>
<div class="city">fukuoka</div>


<button onclick="myFunction()">表示</button>

<script>
function myFunction() {
const elems = document.getElementsByClassName('city');

console.log(elems);

elems.setAttribute('id', 'tt');
}
</script>

エラーメッセージ
Uncaught TypeError: elems.setAttribute is not a function

修正後
1つの要素に対して実行する場合は「インデックス番号」を指定して「DOM要素」にします。

<div class="city">tokyo</div>
<div class="city">oosaka</div>
<div class="city">fukuoka</div>


<button onclick="myFunction()">表示</button>

<script>
function myFunction() {
const elems = document.getElementsByClassName('city');

console.log(elems);

elems[0].setAttribute('id', 'tt');
}
</script>