JavaScript | Uncaught TypeError: document.getElementByClassName is not a function エラーの原因と修正案

JavaScript エラー,JavaScript

JavaScriptで発生するコンソールエラー「Uncaught TypeError: document.getElementByClassName is not a function」の原因と対処・修正案について紹介しています。

Uncaught TypeError: document.getElementByClassName is not a function
キャッチされていないタイプ エラー: document.getElementByClassName は関数ではありません

確認環境

サーバー:エックスサーバー
実行ブラウザ:Microsoft Edge バージョン 106.0.1370.42

Uncaught TypeError: document.getElementByClassName is not a function エラーの発生原因

「Uncaught TypeError: document.getElementByClassName is not a function」というJavaScriptのエラーは単純にタイプミスにて発生したエラーです。

getElementById()から手入力で書き換えた際に「getElements」の部分の「s」が抜けてしまっている事が原因になります。

このエラーはタイプエラー(Uncaught Type Error)に分類されています。

getElementByClassName()という関数は独自に定義していない限り存在しない為、以下のJSコードを実行する場合にエラーは発生します。

const item = document.getElementByClassName('class-name');
// Uncaught TypeError: document.getElementByClassName is not a function

Uncaught TypeError: document.getElementByClassName is not a function の修正案

「Uncaught TypeError: document.getElementByClassName is not a function」エラーを修正するには、正確にgetElementsByClassName()と記述する事で解決します。

const item = document.getElementsByClassName('class-name');
// 正確にclass名を持つHTML要素を取得できる