NEW ARTICLE
kotlin 「if」文を使用する
  1. HOME
  2. javascript
  3. javascript エラー「Uncaught TypeError: xxx.getBoundingClientRect is not a function」の解決方法

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

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

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

目次

環境

  • OS windows11 pro 64bit
  • ブラウザ chrome 107.0.5304.88
Javascript サンプル集はこちら

エラー内容

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

<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]

const result = elems.getBoundingClientRect();

</script>

エラーメッセージ

Uncaught TypeError: elems.getBoundingClientRect is not a function

画像

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

Uncaught TypeError: elems.getBoundingClientRect is not a function

画像

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

TypeError: elems.getBoundingClientRect is not a function. (In 'elems.getBoundingClientRect()', 'elems.getBoundingClientRect' is undefined)

画像

原因

「HTMLCollection」に対して、「getBoundingClientRect」を使用しているため。

解決方法

インデックス番号を指定して「DOM要素」することで解決します。

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

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

const result = elems[0].getBoundingClientRect();

console.log(result);
// DOMRect {x: 800.0000610351562, y: 180.00001525878906, width: 533.3333740234375, height: 30.000001907348633, top: 180.00001525878906, …}

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

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

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

[...elems].forEach(v => {console.log(v.getBoundingClientRect())});

実行結果

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

typeofについて
const elems = document.getElementsByClassName('box');

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

    const result = elems.getBoundingClientRect();
  
}