javascript エラー「Uncaught TypeError: xxx.setAttribute is not a function」の解決方法

作成日 2022.11.16
更新日 2022.11.17
javascript
javascript

javascriptで、エラー「Uncaught TypeError: xxx.setAttribute is not a function」が発生した場合の原因と解決方法を記述してます。「HTMLCollection」に、そのまま「setAttribute」を使用した場合に発生します。「chrome」や「firefox」や「safari」の各ブラウザのエラーメッセージの画像もキャプチャしてます。

1. 環境
2. エラー内容
3. 原因
4. 解決方法

環境

OS windows11 pro 64bit
ブラウザ chrome 107.0.5304.107

Javascript サンプル集はこちら

エラー内容

以下の、「class」を指定して「id」を追加するコードで発生。

<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>

<script>

const elems = document.getElementsByClassName('box');

elems.setAttribute('id', 'foo');

</script>

エラーメッセージ

Uncaught TypeError: elems.setAttribute is not a function

画像

firefox106の場合では、以下のエラーが発生します。

Uncaught TypeError: elems.setAttribute is not a function

画像

safari15.5では、以下のエラーとなります。

TypeError: elems.setAttribute is not a function. (In 'elems.setAttribute('id', 'foo')', 'elems.setAttribute' is undefined)

画像

原因

「HTMLCollection」に直接「setAttribute」を使用しているため。

<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>

<script>

const elems = document.getElementsByClassName('box');

console.log(elems);
// HTMLCollection(3) [div.box, div.box, div.box]

elems.setAttribute('id', 'foo');

</script>

解決方法

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

const elems = document.getElementsByClassName('box');

console.log(elems);
// HTMLCollection(3) [div.box, div.box, div.box]

elems[0].setAttribute('id', 'foo');

実行結果

全てに使用する場合は「HTMLCollection」を配列化して「forEach」などを使用します。

const elems = document.getElementsByClassName('box');

[...elems].forEach(v => {

  v.setAttribute('id', 'foo');

});

実行結果

または、判定してから使用します。

typeofについて

const elems = document.getElementsByClassName('box');

if (typeof elems === 'object' && 'setAttribute' in elems && elems !== null) {

  elems.setAttribute('id', 'foo');

};