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] を使用します。

ブラウザのサポート

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

Browser	Method 1	Method 2	Method 3	Method 4	Method 5/6
IE6	Y(Buggy)	N	Y	Y(Buggy)	N
IE7	Y(Buggy)	N	Y	Y(Buggy)	N
IE8	Y	N	Y	Y(Buggy)	Y
IE9	Y	Y	Y	Y(Buggy)	Y
IE10	Y	Y	Y	Y	Y
FF3.0	Y	Y	Y	Y	N
FF3.5/FF3.6	Y	Y	Y	Y	Y
FF4b1	Y	Y	Y	Y	Y
GC4/GC5	Y	Y	Y	Y	Y
Safari4/Safari5	Y	Y	Y	Y	Y
Opera10.10/	Y	Y	Y	Y(Buggy)	Y
Opera10.53/	Y	Y	Y	Y	Y
Opera10.60	Y	Y	Y	Y	Y
Opera 12	Y	Y	Y	Y	Y

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