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

HTML DOM DDオブジェクトの基本と使い方をサンプルコード付きで解説

HTML DOM の DD オブジェクトは、HTML ドキュメント内の定義リスト（<dl> 要素）の中に含まれる <dd> 要素に関連付けられたオブジェクトです。JavaScript を使うことで、この DD オブジェクトを動的に生成したり、既存の定義リストに追加したりすることができます。

DDオブジェクトを作成する構文

<dd> 要素に対応する DD オブジェクトは、document オブジェクトの createElement() メソッドを使って作成します。

構文

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

DDオブジェクトの使用例

ここでは、実際に HTML DOM DD オブジェクトを使用したサンプルを見ていきましょう。以下の例では、ボタンをクリックすると、テキストを含む新しい <dd> 要素が定義リスト内に動的に追加されます。

<!DOCTYPE html>
<html>
<body>
<h2>dd object example</h2>
<p>Click the button below to create a dd element with some text in it</p>
<button onclick="create_dd()">CREATE</button><br><br>
<dl id="DL1">
<dt>Mango</dt>
</dl>
<script>
    function create_dd() {
      var d = document.createElement("DD");
      var txt = document.createTextNode("Mango is called the king of fruits.");
      d.appendChild(txt);
      var ele= document.getElementById("DL1");
      ele.appendChild(d);
  }
</script>
</body>
</html>

実行結果

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

HTML DOM DDオブジェクトの基本と使い方をサンプルコード付きで解説

CREATE ボタンをクリックすると、定義リスト内に新しい <dd> 要素が追加され、以下のように表示されます。

HTML DOM DDオブジェクトの基本と使い方をサンプルコード付きで解説

コードの解説

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

1. 定義リストの準備

まず、id 属性に「DL1」を指定した定義リストを作成しています。このリストには、用語を表す <dt> 要素がひとつ含まれています。

<dl id="DL1">
<dt>Mango</dt>
</dl>

2. ボタンの設置

次に、CREATE ボタンを配置し、ユーザーがクリックしたときに create_dd() 関数が呼び出されるように onclick イベントで紐付けています。

<button onclick="create_dd()">CREATE</button><br><br>

3. create_dd() 関数の処理内容

create_dd() 関数では、まず document オブジェクトの createElement() メソッドを使って <dd> 要素を生成し、変数 d に格納します。続いて、createTextNode() メソッドでテキストノードを作成して変数 txt に代入します。そして、appendChild() メソッドを使って、このテキストノードを <dd> 要素の子ノードとして追加します。

最後に、もう一度 appendChild() メソッドを呼び出すことで、テキストノードを持つ <dd> 要素全体を、getElementById() で取得した定義リスト「DL1」の子要素として追加しています。

function create_dd() {
    var d = document.createElement("DD");
    var txt = document.createTextNode("Mango is called the king of fruits.");
    d.appendChild(txt);
    var ele= document.getElementById("DL1");
    ele.appendChild(d);
}

まとめ

HTML DOM の DD オブジェクトを利用すると、定義リストの説明部分である <dd> 要素を JavaScript から自由に操作できます。createElement() や createTextNode()、appendChild() を組み合わせることで、ページを再読み込みすることなく動的にコンテンツを追加できるため、インタラクティブな Web ページの開発に役立ちます。

  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 ではサポートされていないため注