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

HTML DOM DTオブジェクトとは？JavaScriptで動的に用語リストを生成する方法

HTML DOM DTオブジェクトは、HTMLの<dt>要素（定義リスト内の「用語」を表す要素）に関連付けられたオブジェクトです。このDTオブジェクトを利用すると、JavaScriptを使って<dt>要素を動的に生成することができます。

構文

DTオブジェクトを作成するための基本的な構文は以下のとおりです。

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

サンプルコード

それでは、HTML DOM DTオブジェクトの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h2>DT object example</h2>
<p>Create a DT element inside a DL by clicking the below button</p>
<button onclick="createDT()">CREATE</button>
<script>
   function createDT() {
      var Desc = document.createElement("DL");
      var DesT = document.createElement("DT");
      var tn= document.createTextNode("Mango");
      DesT.appendChild(tn);
      var data = document.createElement("DD");
      var tn1 = document.createTextNode("Mango is the king of fruits");
      data.appendChild(tn1);
      document.body.appendChild(Desc);
      Desc.appendChild(DesT);
      Desc.appendChild(data);
   }
</script>
</body>
</html>

実行結果

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

HTML DOM DTオブジェクトとは？JavaScriptで動的に用語リストを生成する方法

「CREATE」ボタンをクリックすると、以下のように定義リストが動的に追加されます。

HTML DOM DTオブジェクトとは？JavaScriptで動的に用語リストを生成する方法

コードの解説

このサンプルでは、まずユーザーがクリックするとcreateDT()メソッドが実行される「CREATE」ボタンを配置しています。

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

createDT()メソッド内部では、documentオブジェクトのcreateElement()メソッドを使って<dl>、<dt>、<dd>の3つの要素をそれぞれ生成し、変数Desc、DesT、dataに代入しています。

続いて、createTextNode()メソッドを使用して<dt>要素と<dd>要素に表示するテキストノードを作成し、appendChild()メソッドでそれぞれ対応する要素に追加しています。

最後に、<dt>要素と<dd>要素を<dl>要素に追加したうえで、その<dl>要素全体をappendChild()メソッドによってドキュメントのbodyに追加しています。

function createDT() {
   var Desc = document.createElement("DL");
   var DesT = document.createElement("DT");
   var tn= document.createTextNode("Mango");
   DesT.appendChild(tn);
   var data = document.createElement("DD");
   var tn1 = document.createTextNode("Mango is the king of fruits");
   data.appendChild(tn1);
   document.body.appendChild(Desc);
   Desc.appendChild(DesT);
   Desc.appendChild(data);
}

このように、createElement()とcreateTextNode()、appendChild()を組み合わせることで、ページの読み込み後でも自由に定義リストを動的に構築できるのがHTML DOM DTオブジェクトの大きな特徴です。

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