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

2022-10-142023-10-16JavaScript エラー,JavaScript

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

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

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

「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

document.getElementByClassName is not a function の修正案

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

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