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

【JavaScript】ボタンが属するフォームのIDを取得する方法を解説

JavaScriptでボタンが属するフォームのID（id属性）を取得するには、form要素が持つidプロパティを使用します。

基本的な考え方

HTMLでは、<button>や<input>などのフォームコントロールは、自身が属するフォームへの参照をformプロパティとして自動的に保持しています。この性質を利用すると、ボタンの要素から直接、親フォームにアクセスし、そのidプロパティを読み取ることができます。

サンプルコード

以下のコードを実行すると、ボタンからそのボタンが属するフォームのIDを取得して表示できます。

<!DOCTYPE html>
<html>
  <body>
    <form id="myForm">
      <button id="btn" type="button">My Button</button>
    </form>
    <script>
      var str = document.getElementById("btn").form.id;
      document.write("上記ボタンが属するフォームのID: " + str);
    </script>
  </body>
</html>

コードの解説

処理の流れは以下のとおりです。

1. document.getElementById("btn") で、IDが「btn」のボタン要素を取得します。
2. ボタンの .form プロパティで、そのボタンが属するフォーム要素（ここでは「myForm」）へアクセスします。
3. フォームの .id プロパティを読み取り、フォームのIDである「myForm」を取得します。

実行結果

ブラウザでこのページを開くと、次のように表示されます。

上記ボタンが属するフォームのID: myForm

補足：より現代的な書き方

document.writeは現在では非推奨とされるため、実際の開発ではtextContentなどを使ってDOMに書き出す方法が一般的です。以下はその一例です。

const btn = document.getElementById("btn");
const output = document.getElementById("output");
output.textContent = "フォームのID: " + btn.form.id;

このように、フォームコントロールのformプロパティを使えば、DOM構造をたどることなく、簡単に所属フォームの情報を取得できます。

  1. JavaScriptでオブジェクトを含む二次元配列のインデックスを検索する方法

    JavaScriptでオブジェクトを格納した二次元配列から特定の要素のインデックス（位置）を調べたい場合、「行（row）」を走査するループと「列（column）」を走査するループの2つのforループを組み合わせて使用します。以下に具体的な実装例を示します。 サンプルコード function matrixIndexed(details, name) { var r; var c; for (r = 0; r < details.length; ++r) { const nsDetails = details[r]; for (c =

  2. JavaScriptで3次元配列から最大値を取得する方法

    JavaScriptでは、flat()メソッドとMath.max()を組み合わせることで、多次元（3D）配列の中から最大の数値を簡単に見つけることができます。 対象となる3次元配列 例として、以下のような入れ子構造を持つ3次元配列を考えます。 var theValuesIn3DArray = [75, [18, 89], [56, [97], [99]]]; この配列には、数値だけでなく配列が何重にもネストされています。そこで、flat(Infinity)を使って配列を完全にフラット化（一次元化）してから、Math.max()で最大値を求めます。 実装例 Array.prototypeに独自の