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

HTML DOM キャプションオブジェクトとは？基本と使い方を解説

HTML DOM の Caption オブジェクトは、HTML の <caption> 要素に関連付けられたオブジェクトです。<caption> 要素は、テーブル（表）にキャプション（タイトル）を設定するために使用され、必ずテーブルの最初の子要素として配置する必要があります。Caption オブジェクトを利用することで、JavaScript から caption 要素へアクセスしたり、動的に生成したりすることが可能になります。

プロパティ

注意：以下のプロパティは HTML5 ではサポートされていません。

HTML DOM Caption オブジェクトのプロパティは次のとおりです。

プロパティ説明
alignキャプションの配置（アラインメント）を設定または取得します。

構文

キャプションオブジェクトを作成する構文は以下のとおりです。

var x = document.createElement("CAPTION");

サンプルコード

それでは、HTML DOM Caption オブジェクトの使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
       border: 1px double black;
       margin-top: 14px;
    }
</style>
</head>
<body>
<p>下のボタンをクリックすると、テーブルにキャプションが追加されます。</p>
<button onclick="createCaption()">CREATE</button>
<table id="SampleTable">
<tr>
<td colspan="2" rowpan="2">TABLE</td>
</tr>
<tr>
<td>値 1</td>
<td>値 2</td>
</tr>
</table>
<script>
    function createCaption() {
       var x = document.createElement("CAPTION");
       var t = document.createTextNode("TABLE CAPTION");
       x.appendChild(t);
       var table = document.getElementById("SampleTable")
       table.insertBefore(x, table.childNodes[0]);
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような表示になります。

CREATE ボタンをクリックすると：

コードの解説

上記の例では、まず CREATE ボタンを作成し、クリックされたときに createCaption() メソッドが実行されるようにしています。

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

createCaption() メソッドでは、document オブジェクトの createElement() メソッドを使って caption 要素を生成し、変数 x に代入しています。続いて、「TABLE CAPTION」というテキストを持つテキストノードを作成し、appendChild() メソッドで caption 要素に追加しています。

最後に、id「SampleTable」で <table> 要素を取得し、insertBefore() メソッドを使って、テキストノードを含んだ caption 要素をテーブルの最初の子要素として挿入しています。<caption> 要素はテーブルの最初の子要素としてのみ配置できるためです。

function createCaption() {
    var x = document.createElement("CAPTION");
    var t = document.createTextNode("TABLE CAPTION");
    x.appendChild(t);
    var table = document.getElementById("SampleTable")
    table.insertBefore(x, table.childNodes[0]);
}

まとめ

HTML DOM Caption オブジェクトを使えば、JavaScript から動的にテーブルへキャプションを追加できます。createElement("CAPTION") で要素を生成し、insertBefore() でテーブルの先頭に挿入するのが基本的な流れです。なお、align プロパティは HTML5 では非推奨となっているため、キャプションの見た目を調整したい場合は CSS を使うことをおすすめします。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

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

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