JavaScript を使用してテキスト入力フィールドの値を取得するにはどうすればよいですか?

JavaScript を使用してテキスト入力フィールドの値を取得するにはどうすればよいですか?

フォーム要素が Web ページの他の側面を妨げる可能性があるシナリオでは、入力テキストを取得しますフィールド値が直接必要になります。 JavaScript では、これを実現するためのいくつかのメソッドが提供されています。

メソッド 1: document.getElementById

document.getElementById('searchTxt').value;

このメソッドは、ID によって入力フィールドの値を取得します。

方法 2: document.getElementsByClassName

document.getElementsByClassName('searchField')[0].value;

このメソッドは、特定のクラスを持つすべての入力フィールドを選択し、HTMLCollection を返します。最初の要素にアクセスするには [0] を使用します (複数の要素がある場合)。

メソッド 3: document.getElementsByTagName

document.getElementsByTagName('input')[0].value;

このメソッドはすべての入力要素を選択しますページ上で HTMLCollection を返します。ここでも、最初の要素には [0] を使用します。

メソッド 4: document.getElementsByName

document.getElementsByName('searchTxt')[0].value;

このメソッドは、特定の名前を持つすべての入力フィールドを取得します。最初の出現には [0] を使用します。

メソッド 5: document.querySelector

document.querySelector('#searchTxt').value;
document.querySelector('.searchField').value;

このメソッドは CSS セレクターを使用して要素を選択し、対象を絞った取得を可能にします。

方法 6: document.querySelectorAll

document.querySelectorAll('#searchTxt')[0].value;
document.querySelectorAll('.searchField')[0].value;

document.querySelector と同様に、このメソッドは CSS セレクターを使用しますが、一致するすべての要素の NodeList を返します。最初の要素には [0] を使用します。

ブラウザのサポート

以下の表は、さまざまなブラウザでのこれらのメソッドのサポート レベルを示しています。

以上がJavaScript を使用してテキスト入力フィールドの値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。