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

HTML DOM divオブジェクトとは？プロパティ・構文・サンプルコードを解説

HTML DOM divオブジェクトとは

HTML DOMのdivオブジェクトは、HTMLの<div>要素に関連付けられたオブジェクトです。<div>は汎用的なブロックレベル要素であり、複数の要素をひとつのグループとしてまとめるために使用されます。要素をグループ化することで、まとめてスタイルを適用したり、単一のタグ名やidを通じてHTML要素群を一括で操作したりすることが可能になります。

Webページのレイアウト構築において、<div>は最も頻繁に使われる要素のひとつです。JavaScriptから動的に<div>要素を生成・操作できると、ページの柔軟性が大きく向上します。

divオブジェクトのプロパティ

divオブジェクトには、以下のプロパティが用意されています。

プロパティ説明
Align<div>要素のalign属性の値を設定または取得します。このプロパティはHTML5ではサポートされていないため、要素の配置には代わりにCSSを使用してください。

構文（シンタックス）

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

var p = document.createElement("DIV");

サンプルコード

HTML DOM divオブジェクトの使用例を見てみましょう。以下の例では、ボタンをクリックするとテキストを含む<div>要素が動的に作成され、ページに追加されます。

<!DOCTYPE html>
<html>
<body>
<h2>Divオブジェクトのサンプル</h2>
<p>CREATEボタンをクリックすると、テキストを含むdiv要素が作成されます。</p>
<button onclick="createDiv()">CREATE</button>
<script>
    function createDiv() {
        var d = document.createElement("DIV");
        var txt = document.createTextNode("サンプルのdiv要素");
        d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
        d.appendChild(txt);
        document.body.appendChild(d);
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM divオブジェクトとは？プロパティ・構文・サンプルコードを解説

CREATEボタンをクリックすると、以下のように緑色の背景を持つ<div>要素がページに追加されます。

HTML DOM divオブジェクトとは？プロパティ・構文・サンプルコードを解説

コードの解説

上記の例では、まずユーザーがクリックするとcreateDiv()関数が実行されるCREATEボタンを作成しています。

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

createDiv()関数内の処理は、以下の流れで行われています。

  • 要素の作成：document.createElement("DIV")によって<div>要素を生成し、変数dに代入します。
  • テキストノードの作成：document.createTextNode()でテキストノードを生成し、変数txtに代入します。
  • 属性の設定：setAttribute()メソッドを使用して、<div>要素にmarginやwidth、背景色、枠線などのスタイル属性を設定します。
  • テキストの追加：appendChild()メソッドで、テキストノードを<div>要素の子ノードとして追加します。
  • ページへの追加：最後に、テキストを含む<div>要素全体を、document.body.appendChild()によってドキュメントのbodyに子要素として追加します。
function createDiv() {
    var d = document.createElement("DIV");
    var txt = document.createTextNode("サンプルのdiv要素");
    d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue");
    d.appendChild(txt);
    document.body.appendChild(d);
}

このように、createElement()とappendChild()を組み合わせることで、JavaScriptから自由に<div>要素を動的に生成し、ページへ挿入することができます。


  1. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object

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

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