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

HTML DOMのSummaryオブジェクトとは？要素の作成方法を解説

HTML DOMのSummaryオブジェクトは、HTMLドキュメント内の<summary>要素を表すオブジェクトです。<summary>要素は、<details>要素と組み合わせて使用され、折りたたみ可能なコンテンツの見出し（キャプション）として機能します。

Summaryオブジェクトの作成方法

JavaScriptでSummaryオブジェクトを作成するには、document.createElement()メソッドを使用します。

構文

document.createElement("SUMMARY");

サンプルコード

以下は、HTML DOMのSummaryオブジェクトを使った具体的な例です。ボタンをクリックすると、<details>要素と<summary>要素が動的に生成されます。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        text-align: center;
        background-color: #fff;
        color: #0197F6;
    }
    h1 {
        color: #23CE6B;
    }
    .btn {
        background-color: #fff;
        border: 1.5px dashed #0197F6;
        height: 2rem;
        border-radius: 2px;
        width: 60%;
        margin: 2rem auto;
        display: block;
        color: #0197F6;
        outline: none;
        cursor: pointer;
    }
</style>
</head>
<body>
<h1>DOM summary Object Demo</h1>
<button onclick="createSummary()" class="btn">Create a summary object</button>
<script>
    function createSummary() {
        var details = document.createElement("DETAILS");
        var summary = document.createElement("SUMMARY");
        var para = document.createElement("P");
        var paraTxt = document.createTextNode("- I'm para element");
        para.appendChild(paraTxt);
        var summaryTxt = document.createTextNode("I'm summary element");
        summary.appendChild(summaryTxt);
        details.appendChild(summary);
        details.appendChild(para);
        document.body.appendChild(details);
    }
</script>
</body>
</html>

実行結果

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

「Create a summary object」ボタンをクリックすると、Summaryオブジェクトが動的に生成されます。

さらに、生成された<summary>部分をクリックすると、折りたたまれていた段落テキストが展開されて表示されます。

コードのポイント解説

  • document.createElement("DETAILS")：折りたたみ可能なコンテナとなるdetails要素を作成します。
  • document.createElement("SUMMARY")：クリック可能な見出しとなるsummary要素を作成します。
  • createTextNode()：要素内に表示するテキストノードを生成し、appendChild()で各要素に追加しています。
  • summary要素とp要素をdetails要素に追加することで、クリックで開閉できるアコーディオンUIが完成します。

このように、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 ではサポートされていないため注