DOM操作で「Cannot read properties of null」エラーが出てしまう時の解決策

Contents

DOM要素が取得できないと…

以下は#titleのテキストカラーを赤くするというJavaScriptコードです。

#titleがあれば#titleのテキストカラーを赤くします。

const elem = document.getElementById('title');

elem.style.color = #f00';

HTMLはこちらです。

<h1 id="title">文字を赤くします。</h1>

先程のJavaScriptコードを含んだファイルをWebサイトの全てページに読み込んでおり、今から#titleが存在しないページに遷移したと想定します。

すると以下のようなコンソールエラーが出ます。

Uncaught TypeError: Cannot read properties of null (reading 'style')

#titleが取得できなかったため、変数elemにはnullが入ります。

「nullに対してstyleプロパティを割り当てることはできないよ！」と怒られてしまいました。

値の取得が成功した（elemの値がnullじゃない）時だけ処理を実行するように条件文を追加してあげます。

このように条件分岐を加えてあげると、コンソールエラーが出ない上、メモリーの節約にも繋がります。

const elem = document.querySelector('title');

if (elem !== null) {
  elem.style.color = '#f00';
}

JSを始めたばかりだと結構陥りやすいエラーかなと思います😅

リンク