JavaScript
⏳ DOM 操作が効かない（null エラー）
HTML の読み込み前に script が実行されている
😰 こんな症状
getElementById が null を返す。エラーは出たり出なかったりする。
🔍 原因
<script> タグが <head> にあり、HTML の読み込みが完了する前に DOM 操作をしている。
❌ エラーが起きるコード
const el = document.querySelector(".box");
// script が head にあり DOM 未構築✅ 直し方
<script> を </body> の直前に移動するか、DOMContentLoaded イベントの中で DOM 操作を行う。
✅ 修正後のコード
document.addEventListener("DOMContentLoaded", () => {
const el = document.querySelector(".box");
});この解決法は役立ちましたか？
🔗 関連するエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- ボタンを押しても何も起きない — getElementById の id 不一致
- SyntaxError: Unexpected token — 括弧・波括弧の閉じ忘れ
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説