JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのdocument.bodyプロパティでbody要素を取得・操作する方法

JavaScriptでページの本体部分、つまり <body> タグにアクセスしたい場合は、document.body プロパティを使用します。このプロパティを使うことで、背景色の変更や要素の追加など、body要素に対するさまざまな操作を簡単に行えます。

document.bodyの基本的な使い方

document.body は、現在読み込まれているHTMLドキュメントの <body> 要素への参照を返します。戻り値はHTMLElementオブジェクトなので、スタイルの変更や子要素の追加・削除など、通常のDOM操作がそのまま行えます。

主な活用例

  • スタイルの変更：document.body.style.backgroundColor のようにして背景色などを動的に変更できます。
  • 要素の追加：document.body.appendChild() を使えば、新しい要素をページ末尾に追加できます。
  • クラスの操作：document.body.classList を利用して、テーマの切り替えなどにも活用できます。

サンプルコード

以下のコードでは、document.body プロパティを使ってページの背景色を青色に変更しています。ブラウザで実行すると、body全体の背景が青く表示されます。

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript サンプル</title>
</head>
<body>
   <p>デモテキスト</p>
   <script>
      // body要素の背景色を青に変更する
      document.body.style.backgroundColor = "blue";

      // 応用例：新しい段落をbodyに追加する
      const p = document.createElement("p");
      p.textContent = "appendChildで追加されたテキスト";
      document.body.appendChild(p);
   </script>
</body>
</html>

注意点

<script> をbody内に記述する場合は、対象となる要素より後に置くか、DOMContentLoaded イベントを利用することで、DOMの読み込み完了後に確実に操作できます。また、frameset を使用した古いドキュメント構造では document.body が null を返す場合があるため、モダンなHTML構造での使用が推奨されます。

  1. JavaScriptのHTML DOMでaddEventListener()メソッドを使う方法をわかりやすく解説

    addEventListener()メソッドとは？ addEventListener()メソッドを使用すると、指定したHTML要素にイベントハンドラ（イベント発生時に実行される関数）を追加できます。クリックやダブルクリック、キー入力など、さまざまなイベントに対する処理を柔軟に登録できるのが特徴です。 基本的な構文は以下のとおりです。 要素.addEventListener(イベント名, 実行する関数); 同じ要素・同じイベントに対して複数のハンドラを登録できる点が、onclick属性などの従来の書き方との大きな違いです。 サンプルコード 次のコードを実行して、ボタンをダブルクリックしてみてくだ

  2. MongoDBにJavaScript関数を保存・実行する方法をわかりやすく解説

    MongoDBに保存されたJavaScriptを操作する方法 MongoDBでは、JavaScriptの関数をデータベース内の特別なコレクション「system.js」に保存できます。この仕組みを利用すれば、よく使う処理をサーバー側に登録しておき、必要なときにいつでも呼び出すことが可能です。関数の保存には db.system.js.save() メソッドを使用します。 JavaScript関数を保存する基本構文 db.system.js.save({ _id: anyFunctionName, value: function (returnValue) { re