HTML DOMのbodyプロパティとは？構文とサンプルコードで解説する使い方
HTML DOMのbodyプロパティは、HTMLの<body>要素に関連付けられたプロパティで、<body>要素のプロパティ値を設定または取得するために使用されます。このプロパティは<body>要素そのものを返し、JavaScriptから要素内のコンテンツを動的に変更することができます。また、<body>要素内に存在する子要素の内容を丸ごと上書き（置き換え）することも可能です。
構文
bodyプロパティを設定する場合の構文は以下のとおりです。
document.body = New_Content
ここで、New_Content は<body>要素に新しく設定するコンテンツです。
サンプルコード
HTML DOMのbodyプロパティを使用した具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<body>
<h2>Sample HEADING</h2>
<p>Click the below button to overwrite child content</p>
<button onclick="OverWrite()">Overwrite Content</button>
<p>A sample paragraph</p>
<script>
function OverWrite() {
document.body.innerHTML = "All the content inside the body tag is overwritten";
}
</script>
</body>
</html>
出力結果
このコードを実行すると、以下のように表示されます。
「Overwrite Content」ボタンをクリックすると：
コードの解説
上記の例では、<body>要素の中に<h2>要素1つ、<p>要素2つ、そしてボタンが配置されています。「Overwrite Content」ボタンがクリックされると、OverWrite() 関数が呼び出されます。
<button>Overwrite Content</button>
OverWrite() 関数では、document.body の innerHTML を書き換え、テキストを「All the content inside the body tag is overwritten」に変更しています。これにより、<body>タグ内のすべてのコンテンツが上書きされ、既存の要素はすべて削除され、テキストだけが表示される仕組みです。
function OverWrite() {
document.body.innerHTML = "All the content inside the body tag is overwritten";
}
押さえておきたいポイント
- document.body は、常に現在のドキュメントの<body>要素への参照を返します。
- innerHTML を使うと子要素ごと置き換わるため、既存のイベントリスナーやスタイルも失われる点に注意しましょう。
- HTMLタグを解釈せずにテキストだけを安全に設定したい場合は、textContent プロパティの利用が推奨されます。
-
HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説
HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示
-
HTML DOM offsetWidthプロパティの使い方をわかりやすく解説
HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー