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

HTML DOM Figcaptionオブジェクトの使い方を徹底解説

Figcaptionオブジェクトとは

HTML DOM の Figcaption オブジェクトは、HTML5 の <figcaption> 要素を JavaScript から操作するためのインターフェースです。<figure> 要素内に配置されるキャプション（図表の説明文）を表現するために使われます。

新しい figcaption 要素を作成するには document オブジェクトの createElement() メソッドを使用し、既にページ上に存在する要素にアクセスするには getElementById() メソッドを使用します。

構文

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

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

サンプルコード

それでは、Figcaption オブジェクトの具体的な使用例を見てみましょう。ボタンをクリックすると、画像に対して動的にキャプションが追加される仕組みです。

<!DOCTYPE html>
<html>
<head>
<script>
    function createCaption() {
        var caption = document.createElement("FIGCAPTION");
        var txt = document.createTextNode("Learn Java Servlets");
        caption.appendChild(txt);
        var f=document.getElementById("Figure1");
        f.appendChild(caption);
    }
</script>
</head>
<body>
<h2>Caption</h2>
<p>下のボタンをクリックして、画像にキャプションを作成してください</p>
<button onclick="createCaption()">CREATE</button>
<figure id="Figure1">
<img src="https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg"
alt="Servlets" width="250" height="200">
</figure>
</body>
</html>

実行結果

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

HTML DOM Figcaptionオブジェクトの使い方を徹底解説

CREATE ボタンをクリックすると、画像の下にキャプションが追加されます。

HTML DOM Figcaptionオブジェクトの使い方を徹底解説

コードの解説

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

1. figure要素の準備

まず、id に「Figure1」を指定した figure 要素を作成し、その内部に img 要素を配置しています。

<figure id="Figure1">
<img src="EiffelTower.jpg" alt="Eiffel Tower" width="250" height="200">
</figure>

2. ボタンの設置

次に、ユーザーがクリックすると createCaption() メソッドを実行する CREATE ボタンを用意します。

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

3. キャプションの生成と追加

createCaption() メソッドでは、document オブジェクトの createElement() メソッドを使って figcaption 要素を生成します。続いて、createTextNode() メソッドでテキストノードを作成し、appendChild() メソッドによって figcaption 要素に追加します。

最後に、getElementById() メソッドで figure 要素を取得し、その子要素として figcaption を appendChild() メソッドで追加することで、画面にキャプションが表示されます。

function createCaption() {
    var caption = document.createElement("FIGCAPTION");
    var txt = document.createTextNode("Eiffel Tower in Paris,France");
    caption.appendChild(txt);
    var f=document.getElementById("Figure1");
    f.appendChild(caption);
}

まとめ

Figcaption オブジェクトを活用すれば、JavaScript だけで図表のキャプションを動的に生成・追加できます。createElement() で要素を作り、createTextNode() でテキストを用意し、appendChild() で親要素に組み込むという一連の手順は、他の DOM 要素の操作にも応用できる基本パターンなので、しっかり押さえておきましょう。

  1. HTML DOM の Object オブジェクトとは？主なプロパティと実装例をわかりやすく解説

    HTML DOM の Object オブジェクトは、HTML 内の <object> 要素を JavaScript から操作するためのインターフェースです。<object> 要素は、画像や PDF、動画などの外部リソースを Web ページに埋め込む際に使用されます。 Object 要素の作成方法 JavaScript で新しい <object> 要素を作成するには、document.createElement() メソッドを使用します。 var objectElement = document.createElement(OBJECT); Object

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注