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

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

HTML DOMのDetailsオブジェクトは、HTMLの<details>要素に関連付けられたオブジェクトです。<details>要素を活用することで、ユーザーがクリックして開いたときにだけ内容が表示される、折りたたみ可能な情報ブロックを作成できます。FAQや補足説明など、ページをすっきりと見せたい場面で活躍します。

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

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

番号プロパティと説明
1open
detailsの内容をユーザーに表示するかどうかを設定、または取得します。

openプロパティの使い方

openプロパティにtrueを設定すると、details要素は初期状態で展開された状態になります。JavaScriptから動的に開閉を制御したい場合に便利です。

document.getElementById("myDetails").open = true;

構文

Detailsオブジェクトを新しく作成するための構文は以下のとおりです。

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

サンプルコード

HTML DOM Detailsオブジェクトの具体的な使用例を見てみましょう。ボタンをクリックすると、名所に関するdetails要素が動的に生成されます。

<!DOCTYPE html>
<html>
<body>
<h2>Detailsオブジェクト</h2>
<p>下のボタンをクリックすると、名所に関するDETAILS要素が生成されます</p>
<button onclick="detCreate()">作成</button>
<br><br>
<script>
    function detCreate() {
      var et = document.createElement("DETAILS");
      var sum = document.createElement("SUMMARY");
      var sumText = document.createTextNode("エッフェル塔");
      var txt = document.createTextNode("世界で最も有名な建造物のひとつです");
      sum.appendChild(sumText);
      et.appendChild(txt);
      document.body.appendChild(sum);
      document.body.appendChild(et);
    }
</script>
</body>
</html>

実行結果

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

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

「作成」ボタンをクリックした後、矢印をクリックしてdetailsを展開すると、次のように内容が表示されます。

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

コードの解説

上記のサンプルでは、以下のような流れで処理が行われています。

まず、クリックされるとdetCreate()関数を呼び出す「作成」ボタンを配置しています。

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

detCreate()関数内では、documentオブジェクトのcreateElement()メソッドを使って<details>要素を生成し、変数etに代入しています。続いて、<details>要素の見出しとなる<summary>要素を、同じくcreateElement()メソッドで生成して変数sumに代入します。

次に、createTextNode()メソッドで2つのテキストノード（sumTextとtxt）を作成し、それぞれ<summary>要素と<details>要素にappendChild()で追加します。最後に、新しく作成した<summary>要素と<details>要素をappendChild()メソッドの引数として渡すことで、documentのbodyに追加しています。

function detCreate() {  
    var et = document.createElement("DETAILS");  
    var sum = document.createElement("SUMMARY");  
    var sumText = document.createTextNode("エッフェル塔");  
    var txt = document.createTextNode("世界で最も有名な建造物のひとつです");      
    sum.appendChild(sumText);  
    et.appendChild(txt);  
    document.body.appendChild(sum);  
    document.body.appendChild(et);
}
  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 ではサポートされていないため注