導入
Webページを操作するJavaScriptにおいて、最も頻繁にアクセスする要素の一つが「body要素」です。JavaScriptで文字の色を変えたり、背景を操作したりする際、このdocument.bodyを理解しておくことは必須です。これを知ることで、ページ全体に対する動的な制御が自由自在に行えるようになります。
基礎知識
ブラウザで表示されるWebページのHTMLは、大きく分けると「head（設定情報）」と「body（表示内容）」の2つで構成されています。
JavaScriptの「document」は、現在のページ全体を指すオブジェクトです。その中で「body」プロパティは、HTML内の
実装/解決策
document.bodyにアクセスするには、単に「document.body」と記述するだけです。これに「.style」をつなげるとCSSを操作でき、「.innerHTML」をつなげると中身のHTMLを書き換えることができます。
注意点として、JavaScriptのコードは、HTMLが読み込まれた後に実行される必要があります。body要素がまだ作られていないタイミングで操作しようとするとエラーになるため、基本的にはscriptタグをbodyの最後に配置するか、読み込み完了イベントを待ちましょう。
サンプルプログラム
以下のコードは、ボタンを押すと背景色を青色に変え、画面中央にメッセージを表示する実用的な例です。HTMLファイルとして保存し、ブラウザで開いて試してみてください。
応用・注意点
1. innerHTMLの多用には注意: 上記の例のようにinnerHTMLを書き換えると、既存の要素がすべて消滅してしまいます。特定の箇所だけ変えたい場合は、document.createElementなどで新しい要素を作成し、appendChildで追加する方法が推奨されます。
2. スタイルの指定方法: JavaScriptからCSSを操作する場合、CSSの「background-color」は「style.backgroundColor」のように、ハイフンを抜いて次の文字を大文字にする「キャメルケース」で記述するルールがあります。
3. DOMの読み込み順: もしJavaScriptファイルをHTMLのhead内で読み込む場合は、「window.addEventListener(‘DOMContentLoaded’, () => { … })」で囲むことで、HTMLの準備が整ってから実行されるようになり、エラーを回避できます。