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

HTML DOM Bodyオブジェクトとは？基本概念から使い方まで徹底解説

HTML DOM Bodyオブジェクトの概要

HTML DOM Bodyオブジェクトは、HTMLの<body>要素に関連付けられたオブジェクトです。bodyタグ内に設定された属性とその値は、子ノードによって上書きされない限り、HTMLドキュメント全体にわたって保持されます。Bodyオブジェクトを使用することで、これらのプロパティやその値へアクセスし、操作することができます。

Bodyオブジェクトの主なプロパティ

以下は、HTML DOM Bodyオブジェクトが持つ主なプロパティの一覧です。

注意： 以下のプロパティはHTML5ではサポートされていません。代わりにCSSを使用することが推奨されています。

プロパティ説明
aLinkドキュメント内のアクティブリンク（クリック中のリンク）の色を設定または取得します。
backgroundドキュメントの背景画像を設定または取得します。
bgColorドキュメントの背景色を設定または取得します。
linkドキュメント内の未訪問リンクの色を設定または取得します。
textドキュメントのテキスト色を設定または取得します。
vLinkドキュメント内の訪問済みリンクの色を設定または取得します。

構文

Bodyオブジェクトを作成する構文は以下のとおりです。

var x = document.createElement("BODY");

サンプルコード

HTML DOM Bodyオブジェクトの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>aside tag</title>
<h2>HTML DOM BODY OBJECT</h2>
<button onclick="createBody()">CREATE</button>
<script>
    function createBody() {
        var x = document.createElement("BODY");
        x.setAttribute("id", "myBody");
        document.body.appendChild(x);
        var Para = document.createElement("P");
        var text = document.createTextNode("A sample paragraph created as child of body");
        Para.appendChild(text);
        document.getElementById("myBody").appendChild(Para);
    }
</script>
</head>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOM Bodyオブジェクトとは？基本概念から使い方まで徹底解説

CREATEボタンをクリックすると、以下のように表示されます。

HTML DOM Bodyオブジェクトとは？基本概念から使い方まで徹底解説

コードの解説

このサンプルコードの処理内容を順番に見ていきましょう。

まず、CREATEボタンをクリックすると関数createBody()が呼び出されるように設定しています。

<button onclick="createBody()">CREATE</button>

createBody()メソッドでは、まず<body>要素を生成して変数xに代入します。次に、setAttribute()メソッドを使ってbody要素のid属性を「myBody」に設定し、appendChild()メソッドでドキュメントの子要素として追加します。

その後、別の要素として<p>（段落）要素を生成し、「A sample paragraph created as child of body」というテキストノードを作成します。このテキストノードは、段落の子要素として追加されます。

最後に、<body>要素のidを指定してgetElementById()で参照し、そのbodyに対して段落をappendChild()で追加しています。

function createBody() {
    var x = document.createElement("BODY");
    x.setAttribute("id", "myBody");
    document.body.appendChild(x);
    var Para = document.createElement("P");
    var text = document.createTextNode("A sample paragraph created as child of body");
    Para.appendChild(text);
    document.getElementById("myBody").appendChild(Para);
}

まとめ

HTML DOM Bodyオブジェクトを使うことで、JavaScriptから<body>要素に動的にアクセスし、新しい要素の追加や属性の操作が可能になります。ただし、aLinkやbgColorなどの一部のプロパティはHTML5では廃止されているため、実際の開発ではCSSによるスタイリングを推奨します。

  1. HTML DOM Titleオブジェクトとは？textプロパティの使い方をわかりやすく解説

    HTML DOM Titleオブジェクトの概要HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。<title> 要素の作成方法新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。var titleObject = document.createElement(TITLE)ここで作成した「title

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注