HTML DOM th オブジェクト詳解：表格标题单元格の制御センター
説明
HTML DOM における <th> オブジェクトについて深く理解し、JavaScript を使用して表格标题单元格を操作する方法を習得することで、動的な表格効果を実現します。
<th> 要素とは？
<th>要素は、HTML 表格内の标题单元格を定義します。- 标题单元格の内容は、デフォルトで太字で中央揃えで表示され、データテーブルの列または行を説明するために使用されます。
<td>要素とは異なり、<th>は具体的なデータではなく、表頭情報を格納するために使用されます。
<th> オブジェクトのプロパティ
<th> オブジェクトは、すべての HTMLElement のプロパティを継承し、以下の独自の属性を持ちます。
| プロパティ | 説明 |
|---|---|
colSpan |
标题单元格が跨ぐ列数を設定します。 |
rowSpan |
标题单元格が跨ぐ行数を設定します。 |
headers |
この标题单元格に関連付けられたデータ单元格の ID リストを取得します。 |
scope |
标题单元格の適用範囲（列、行、またはグループ）を定義します。
|
JavaScript を使用した <th> オブジェクトの操作
JavaScript を使用すると、<th> オブジェクトに対してさまざまな操作を実行できます。以下に例を示します。
<th>要素の取得:document.getElementsByTagName('th')を使用してすべての<th>要素を取得するか、querySelectorおよびquerySelectorAllを使用して特定の要素を選択します。- 内容の変更:
innerHTMLまたはtextContentプロパティを使用して、标题单元格の内容を変更します。 - 動的な属性の設定: 例えば、
element.colSpan = 2を使用して、单元格が 2 つの列にまたがるように設定します。 - CSS クラスの追加/削除:
classListプロパティを使用して、标题单元格のスタイルを動的に変更します。
コード例
<table>
<thead>
<tr>
<th id="nameHeader">名前</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<!-- テーブルのデータ -->
</tbody>
</table>
<script>
// ID で th 要素を取得
const nameHeader = document.getElementById('nameHeader');
// colSpan を変更
nameHeader.colSpan = 2;
</script>
<th> オブジェクトの適用シーン
- 動的な表格の作成: JavaScript を使用して、ユーザー操作やデータに基づいて表格を動的に生成し、対応する标题单元格を設定します。
- 表格の並べ替えの実装: 标题单元格のクリックイベントをリッスンして、表格データを並べ替えます。
- 表格のアクセシビリティの向上:
scope属性を正しく使用することで、スクリーンリーダーが表格構造をよりよく理解できるようになり、ユーザーエクスペリエンスが向上します。
まとめ
<th> オブジェクトのプロパティとメソッドを習得することで、機能が豊富でメンテナンスしやすい動的な表格を作成し、Web サイトのユーザーエクスペリエンスとアクセシビリティを向上させることができます。
関連QA
Q1: <th> 要素と <td> 要素の違いは何ですか？
A1: <th> 要素は表格の**ヘッダーセル**を表し、通常は列の見出しとして使用されます。一方、<td> 要素は表格の**データセル**を表し、具体的なデータを表示するために使用されます。<th> 要素内のテキストはデフォルトで太字で表示され、<td> 要素内のテキストは通常の太さで表示されます。
Q2: scope 属性の使い分け方を教えてください。
A2: scope 属性は、スクリーンリーダーなどの支援技術に対して、ヘッダーセルがどのセルに関連付けられているかを明示するために使用します。例えば、scope="row" はヘッダーセルが同じ行のセルに関連付けられていることを示し、scope="col" は同じ列のセルに関連付けられていることを示します。
Q3: JavaScript で <th> 要素のスタイルを変更するにはどうすればよいですか？
A3: <th> 要素を取得し、その style プロパティを使用してスタイルを変更できます。例えば、背景色を赤に変更するには、次のようにします。
const headerCell = document.querySelector('th');
headerCell.style.backgroundColor = 'red';