JavaScriptで値を取得する方法

現代の Web 開発の急速な発展に伴い、JavaScript は Web フロントエンド開発において最も重要な言語の 1 つになりました。 JavaScript において、値の取得は非常に基本的かつ重要な操作であり、日々の開発作業においても欠かせないものです。この記事では、JavaScript でさまざまな種類の値を取得する方法とテクニックを紹介し、いくつかの実践例を示します。

1. 入力ボックスの値を取得する

Web 開発では、通常、フォーム入力ボックスへのユーザー入力など、ユーザーから入力データを取得する必要があります。 JavaScript には、入力ボックスの値を取得するためのメソッドがいくつか用意されています。たとえば、次のとおりです。

1. ID による入力ボックスの取得

入力ボックスを取得する最も簡単な方法は、Get を使用することです。 ID で要素を取得し、要素の値を取得します。たとえば、ID が「input」の入力ボックスの場合、次のコードを使用してその値を取得できます。

let inputEle = document.getElementById('input');
let inputValue = inputEle.value;

2. 名前で入力ボックスを取得します

id を渡すだけでなく、入力ボックスを取得するだけでなく、name 属性を通じて入力ボックスを取得することもできます。このメソッドは複数の入力ボックスを含むフォームに適しており、フォーム要素をループすることで、指定された name 属性を持つ入力ボックス要素を取得できます。

let forms = document.forms;
for (let i = 0; i < forms.length; i++) {
  let inputEle = forms[i].elements['username'];
  let inputValue = inputEle.value;
}

2. ラジオ ボタンとチェック ボックスの値を取得する

フォームでは、ラジオ ボタンとチェック ボックスの値を取得する必要があることがよくあります。入力ボックスの値を取得するのとは異なり、ラジオ ボタンやチェック ボックスの値を取得するには、いくつかの異なるメソッドを使用する必要があります。

1. 選択されたラジオ ボタンの値を取得する

ラジオ ボタン ボックスの場合、ラジオ ボタン ボックスをループし、選択された要素を見つけてその値を取得する必要があります。

let radios = document.getElementsByName('gender');
let radioValue;
for (let i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    radioValue = radios[i].value;
    break;
  }
}

2. 複数のチェック ボックスの値を取得する

チェック ボックスの場合、選択したチェック ボックスの複数の値を取得する必要がある場合があります。このとき、チェックボックスをループして、選択したチェックボックスの値を配列に格納する方法を使用する必要があります。

let checkboxes = document.getElementsByName('hobbies');
let checkboxValues = [];
for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkboxValues.push(checkboxes[i].value);
  }
}

3. ドロップダウン リストの値を取得する

ドロップダウン リストも一般的なフォーム要素であり、そこから選択された値を取得する必要があります。ラジオ ボタンと同様に、ドロップダウン リストをループし、選択した要素を見つけてその値を取得する必要があります。

let selectEle = document.getElementById('city');
let selectValue = selectEle.options[selectEle.selectedIndex].value;

4. URL パラメータの値を取得する

Web 開発では、URL 内のパラメータ値を取得する必要があることがよくあります。 JavaScript には、URLSearchParams や location.search 属性など、URL 内のパラメーター値を取得するためのメソッドがいくつか用意されています。

1. URLSearchParams

URLSearchParams は、URL クエリ文字列を簡単に解析できる新しい API です。 get メソッドを使用して、指定されたパラメーターの値を取得できます。

let params = new URLSearchParams(location.search);
let id = params.get('id');

2. location.search

URL 内のパラメーター値を取得する場合は、グローバル オブジェクト ウィンドウ オブジェクトの location.search プロパティを使用できます。 location.search は、URL のクエリ部分 (疑問符 ? で始まる部分) を返します。

let searchStr = window.location.search;
let params = new URLSearchParams(searchStr);
let id = params.get('id');

5. 概要

この記事では主に、フォーム入力ボックス、ラジオ ボックス、チェック ボックス、ドロップダウン リストからの値の取得など、JavaScript がさまざまな種類の値を取得する方法を紹介します。そしてfrom URLからパラメータ値を取得します。値の種類に関係なく、JavaScript にはそれを取得するための対応するメソッドが用意されているため、実際のニーズに応じて適切なメソッドを選択するだけで済みます。日々の開発作業において、これらの手法を理解することで、作業の利便性と効率が大幅に向上します。

以上がJavaScriptで値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。