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

HTML DOM dlオブジェクトとは？JavaScriptで記述リストを動的に作成する方法

HTML DOM dlオブジェクトとは

HTML DOMのdlオブジェクトは、HTMLの<dl>要素に関連付けられたオブジェクトです。<dl>要素は「記述リスト（description list）」を作成するためのもので、用語（<dt>）とその説明（<dd>）をセットで表現します。

dlオブジェクトを利用することで、JavaScriptから<dl>要素を動的に生成したり、ページ内の既存の記述リストにアクセスして操作したりすることができます。

構文

記述リストを作成する場合の基本的な構文は以下の通りです。

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

サンプルコード

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

<!DOCTYPE html>
<html>
<body>
<h2>dlオブジェクトのサンプル</h2>
<p>下のボタンをクリックすると記述リストが作成されます</p>
<button onclick="createDescList()">作成</button>
<script>
   function createDescList() {
      var Desc = document.createElement("DL");
      var DesT = document.createElement("DT");
      var tn = document.createTextNode("マンゴー");
      DesT.appendChild(tn);
      var data = document.createElement("DD");
      var tn1 = document.createTextNode("マンゴーは果物の王様です");
      data.appendChild(tn1);
      document.body.appendChild(Desc);
      Desc.appendChild(DesT);
      Desc.appendChild(data);
   }
</script>
</body>
</html>

実行結果

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

HTML DOM dlオブジェクトとは？JavaScriptで記述リストを動的に作成する方法

「作成」ボタンをクリックすると、以下のように記述リストが画面に追加されます。

HTML DOM dlオブジェクトとは？JavaScriptで記述リストを動的に作成する方法

コードの解説

上記の例では、まず「作成」ボタンを配置し、ユーザーがクリックするとcreateDescList()関数が実行されるように設定しています。

<button onclick="createDescList()">作成</button>

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

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

最後に、<dt>要素と<dd>要素を<dl>要素に子要素として追加し、その<dl>要素ごとdocument.bodyにappendChild()メソッドで追加することで、ページ上に記述リストが表示される仕組みです。

function createDescList() {
   var Desc = document.createElement("DL");
   var DesT = document.createElement("DT");
   var tn = document.createTextNode("マンゴー");
   DesT.appendChild(tn);
   var data = document.createElement("DD");
   var tn1 = document.createTextNode("マンゴーは果物の王様です");
   data.appendChild(tn1);
   document.body.appendChild(Desc);
   Desc.appendChild(DesT);
   Desc.appendChild(data);
}

このように、dlオブジェクトとcreateElement()、createTextNode()、appendChild()といったDOM操作メソッドを組み合わせることで、JavaScriptだけで柔軟に記述リストを動的に生成できます。

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