JavaScript で入力値を取得する方法

JavaScript で入力値を取得するには、入力要素を選択し、その value プロパティを読み取ります。これは直接行うことができ、入力をフォームでラップする必要はありません。入力がどのように識別されるか（ID、共有クラス、CSS セレクター）に基づいて検索方法を選択してください。以下の例では小さなブラウザ風のフィクスチャを使用しているため、選択と値の読み取りの手順は、提供されたランタイムでも目に見える結果を生成できます。ページでは、document に対して同じ DOM メソッドを使用し、スクリプトをその入力マークアップの後に配置するか、ページの読み込み後に実行してください。

document.getElementById() で入力値を取得する

入力に一意の id を与え、その ID を document.getElementById() に渡します。このメソッドは一致する要素を返すため、その value プロパティはその入力に現在保持されているテキストを読み取ります。スニペットは入力を作成し、その ID と値を割り当て、選択された値を表示します。提供されたランタイムのケースでは Ada が生成されました。このアプローチは、ページが名前やメール入力などのフィールドに安定した一意の ID を与える場合に適しています。ID はドキュメント内で一意でなければなりません。2 つの要素が 1 つを共有すると、検索ではどちらを意図したかを表現できません。フレームワークによって後でレンダリングされるフィールドや、スクリプトの実行後に挿入されるフィールドについては、その要素が存在した後にのみ検索を実行してください。返されるオブジェクトは入力自体であり、.value はその現在の内容を読み取ります。近くのラベルや要素の HTML 属性を別個のソースとして読むことはありません。

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ id: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementById: id => elements.find(element => element.id === id) ?? null
  };
})();

const input = doc.createElement("input");
input.id = "name";
input.value = "Ada";
doc.body.append(input);

const currentValue = doc.getElementById("name").value;
doc.body.textContent = currentValue;

Ada

document.getElementsByClassName() でクラスごとに入力値を取得する

複数の入力がクラスを共有する場合は document.getElementsByClassName() を使用します。ブラウザでは、これは配列ではなく、インデックス付きの HTMLCollection を返します。目的の入力を、インデックス 0 から始まる位置で読み取り、次に .value にアクセスします。その位置を、ページ内の一致する要素の順序と揃えてください。以下のコードは、ブラウザの外で実行される場合に小さなフィクスチャを使用します。その結果は、この例ではインデックス付きのリストです。提供されたランタイムのケースでは 2 番目の入力が選択され、Grace が生成されました。クラスは、ページが同じ種類のコントロールを繰り返す場合に便利ですが、インデックスはドキュメントの順序に依存します。ページが一致する入力を追加、削除、並べ替えすると、同じインデックスが別のフィールドを指す場合があります。可能であれば、クラスをより具体的なコンテナと組み合わせるか、既知のフィールドには ID を選択してください。HTMLCollection は配列に似ており数値インデックスをサポートしますが、配列ではありません。.map() のような配列メソッドは直接は使用できません。各一致を処理する必要がある場合は、ループを使用するか、Array.from() でコレクションを変換してください。

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ className: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    getElementsByClassName: className => elements.filter(element => element.className.split(/\s+/).includes(className))
  };
})();

const firstInput = doc.createElement("input");
firstInput.className = "contact";
firstInput.value = "Ada";

const secondInput = doc.createElement("input");
secondInput.className = "contact";
secondInput.value = "Grace";

doc.body.append(firstInput, secondInput);

const currentValue = doc.getElementsByClassName("contact")[1].value;
doc.body.textContent = currentValue;

Grace

document.querySelector() で入力値を取得する

document.querySelector() は CSS セレクターを受け取り、最初に一致する要素を返します。ID には #name、クラスには .contact、タグには input、name 属性には [name="email"] を使用します。選択した入力に .value を適用します。セレクターが複数の要素に一致する場合、このメソッドは最初のものだけを読み取ります。すべての一致を扱うには querySelectorAll() を使用してください。どの要素にも一致しないセレクターは null を返すため、その値を読み取る前に、セレクターが入力に一致することを確認してください。この例では、name 属性によって入力を選択します。提供されたランタイムのケースでは ada@example.com が生成されました。利用可能な最も安定した識別詳細を表すセレクターを使用し、ページのマークアップと揃えてください。たとえば、[name="email"] は、入力にまさにその name 属性がある場合に機能します。マークアップを name="contactEmail" に変更するには、セレクターも変更する必要があります。querySelector() は 1 つの要素しか返さないため、ページが意図した一致を 1 つ提供すべき場合に簡潔です。一致するすべての入力が重要な場合は、querySelectorAll() が反復処理できるコレクションを返します。

値を読み取ってもフォームは送信されず、入力も変更されません。現在入力されているテキストをスクリプトに渡すだけであり、それを検証したりイベントハンドラーで使用したりできます。そのテキストをページに再び表示する場合は、textContent で割り当て、ブラウザがそれをマークアップではなくテキストとして扱うようにしてください。実際のフォームでは、値をいつ読み取るかも決めてください。イベントハンドラーは、ユーザーが入力または送信した後にそれを取得できますが、ページの読み込み時に一度だけ実行されるコードは、その時点での値を読み取ります。3 つのメソッドの主な違いは要素の見つけ方です。入力要素が得られれば、読み取る .value は同じプロパティです。

const doc = globalThis.document ?? (() => {
  const elements = [];
  return {
    createElement: () => ({ name: "", value: "" }),
    body: {
      append: (...nodes) => elements.push(...nodes),
      set textContent(value) { console.log(value); }
    },
    querySelector: selector => {
      const match = selector.match(/^\[name=["'](.+)["']\]$/);
      return match ? elements.find(element => element.name === match[1]) ?? null : null;
    }
  };
})();

const input = doc.createElement("input");
input.name = "email";
input.value = "ada@example.com";
doc.body.append(input);

const currentValue = doc.querySelector('[name="email"]').value;
doc.body.textContent = currentValue;

ada@example.com