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

【初心者向け】HTML DOM テーブルの tHead プロパティの使い方を解説

HTML DOM の table オブジェクトが持つ tHead プロパティは、HTML 文書内のテーブルに含まれる <thead> 要素を取得するためのプロパティです。テーブルのヘッダー部分へ動的にアクセスしたい場合に便利です。

基本構文

tHead プロパティの基本的な書き方は以下のとおりです。

object.tHead

戻り値として <thead> 要素が返されます。テーブルに <thead> が存在しない場合は null が返される点に注意してください。

サンプルコード

実際に tHead プロパティを使用した例を見てみましょう。ボタンをクリックすると、テーブルのヘッダー内容が画面に表示される仕組みです。

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      background: lightblue;
      height: 100vh;
      text-align: center;
   }
   table {
      margin: 2rem auto;
   }
   caption {
      color: #db133a;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
<body>
<h1>DOM Table tHead Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
<button onclick="get()" class="btn">Show tHead</button>
<div class="show"></div>
<script>
   function get() {
      var tableHeader = document.querySelector('table').tHead;
      document.querySelector(".show").innerHTML = tableHeader.innerHTML;
   }
</script>
</body>
</html>

コードのポイント

  • document.querySelector('table').tHead でページ内の最初のテーブルから <thead> 要素を取得しています。
  • innerHTML を使うことで、取得したヘッダー要素の中身（<th> タグなど）をそのまま表示できます。
  • 同様に tFoot プロパティを使えばフッター（<tfoot>）、tBodies プロパティを使えば本体（<tbody>）も取得可能です。

実行結果

【初心者向け】HTML DOM テーブルの tHead プロパティの使い方を解説

画面上の「Show tHead」ボタンをクリックしてみましょう。

【初心者向け】HTML DOM テーブルの tHead プロパティの使い方を解説

ボタンをクリックすると、テーブルのヘッダー部分（Name と Roll No. の列見出し）が div 要素内に出力され、tHead プロパティが正しく <thead> 要素を取得できていることが確認できます。

  1. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン

  2. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ