取得したDOMに対して、ハンバーガーメニューやアコーディオンなど、クリック時に何らかの動作を実行したい場合があります。
JavaScriptに不慣れな方は、コードをそのままコピペしても動作しない理由がわからないことがあるかもしれません。
今回は、HTMLに<script>タグでJavaScriptを読み込む時に、document.addEventListener('DOMContentLoaded', (event) => {}を追加する理由をまとめます。
DOMContentLoadedとは？
DOMContentLoadedは、HTMLドキュメントの初期の読み込みが完了したことを示すイベントです。
HTMLが生成された後に、DOMを取得する時に使います。
<script>タグをDOMの前に置いた時に、DOMContentLoadedを追加しない場合、buttonタグが生成される前に JavaScriptが読み込まれるため、エラーが発生します。
比較するために以下のコードをHTMLにコピペして確認してみてください。
<!-- 動作するコード -->
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const successButton = document.getElementById('success_button');
successButton.addEventListener('click', function () {
// 動く
console.log('Success button');
});
});
</script>
<button id="success_button">Success button</button>
<!-- 動作するコード -->
<!-- 動作しないコード -->
<script>
const failButton = document.getElementById('fail_button');
failButton.addEventListener('click', function () {
// 動かない
console.log('Fail button');
});
</script>
<button id="fail_button">Fail button</button>
<!-- 動作しないコード -->
動作するコードでは、ボタンに機能を追加するコードがdocument.addEventListener('DOMContentLoaded', (event) => {}の中に書かれているため、DOMが生成された後に実行されます。
動作しないコードでは、基本的にプログラムは上から下に実行されるため、ボタンに機能を追加するコードが先に実行され、ボタンが見つからないとエラーが発生します。
DOMContentLoadedを使わない方法
基本的にプログラムは上から下に実行されるため、DOMの要素を先に書けば、正常に動作します。
比較するために以下のコードをHTMLにコピペして確認してみてください。
<!-- 動くコード -->
<button id="success_button">Success button</button>
<script>
const successButton = document.getElementById('success_button');
successButton.addEventListener('click', function () {
// 動く
console.log('Success button');
});
</script>
<!-- 動くコード -->
<!-- 動かないコード -->
<script>
const failButton = document.getElementById('fail_button');
failButton.addEventListener('click', function () {
// 動かない
console.log('Fail button');
});
</script>
<button id="fail_button">Fail button</button>
<!-- 動かないコード -->
document.addEventListener('DOMContentLoaded', (event) => {}がなくても動作します。
ただし、<script>タグは、DOMの読み込みよりも上に書かれることが多いため、DOMContentLoadedを追加した方が良いでしょう。
まとめ
コピペしたコードがうまく動作しない場合は、試してみてください！