JavaScript における body とは？

Webページは、HTML、CSS、JavaScriptという3つの主要な技術で構成されています。HTMLはページの構造を定義し、CSSはページのスタイルを設定し、JavaScriptはページにインタラクティブな機能を追加します。その中で、JavaScriptはブラウザ上で動作するプログラミング言語であり、ユーザーの操作に応じてページに動的な変化を加えることができます。そして、JavaScriptを使って操作することが多いオブジェクトの一つに「body」があります。

body タグの役割

HTMLにおいて、「」タグは文書の本文を表すタグです。見出しやナビゲーションなどを除く、実際にブラウザの画面上に表示される主要なコンテンツは、このタグの中に記述されます。文章、画像、動画、リスト、テーブルなど、ウェブページ上に表示される要素は、すべてこのタグ内に配置されます。

JavaScript から body を操作する

JavaScript では、このタグで囲まれた要素にアクセスし、操作することができます。例えば、JavaScriptを使って以下のようなことができます。

* **コンテンツの動的な変更**: ページの読み込み後にJavaScriptを使用して、body内のテキストコンテンツを変更したり、新しい要素を追加したりできます。 * **スタイルの変更**: JavaScriptを使用して、body要素やその子要素のCSSスタイルを動的に変更できます。例えば、ボタンクリックに応じて背景色を変更するといったことが可能です。 * **イベントへの応答**: ユーザーがページ上で特定のアクション(クリック、スクロール、マウスオーバーなど)を実行したときに、JavaScriptを使用してbody要素やその子要素に動的に反応させることができます。


<!DOCTYPE html>
<html>
<head>
<title>bodyの操作</title>
<script>
    function changeBackgroundColor(color) {
        document.body.style.backgroundColor = color;
    }
</script>
</head>
<body>
    <h1>背景色を変えてみましょう</h1>
    <button onclick="changeBackgroundColor('red')">赤</button>
    <button onclick="changeBackgroundColor('blue')">青</button>
</body>
</html>

上記の例では、ボタンをクリックするとJavaScriptの `changeBackgroundColor` 関数が呼び出され、bodyの背景色が変更されます。このように、JavaScriptを使ってbody要素を操作することで、動的なWebページを作成することができます。

body タグの属性

タグは、かつては文書の背景色やリンクの色などを指定する属性を持っていましたが、現在ではこれらの属性は非推奨となっており、代わりにCSSを使用することが推奨されています。以下の表に、タグがかつて持っていた属性とその説明を示します。

属性	説明
bgcolor	文書の背景色を指定する(非推奨)
text	文書の文字色を指定する(非推奨)
link	リンクの文字色を指定する(非推奨)
vlink	すでに訪問したリンクの文字色を指定する(非推奨)
alink	アクティブなリンク(クリック中のリンク)の文字色を指定する(非推奨)

JavaScript と body を使った開発

JavaScriptとbody要素の組み合わせは、Webページに動的な機能を追加するための強力なツールです。ユーザーエクスペリエンスを向上させるために、JavaScriptを使用してbody要素を操作し、動的でインタラクティブなWebページを作成しましょう。

参考文献

* Document.body - Web API | MDN

JavaScript における body とは？

body タグの役割

JavaScript から body を操作する

body タグの属性

JavaScript と body を使った開発

参考文献

関連QA

Q1: JavaScript で body 要素にクラスを追加するにはどうすればよいですか？

Q2: JavaScript で body 要素の高さを取得するにはどうすればよいですか？

Q3: body 要素に複数のイベントリスナーを登録できますか？