JavaScript で input 入力ボックスの内容を取得するには、以下のようないくつかの方法があります。
方法 1
document.getElementById('textbox_id').value // 获取指定 id 的内容
例
document.getElementById("searchTxt").value;
注意：以下の方法 2、3、4、6 は要素の集合を返します。インデックスによって[index]指定の要素を取得します。最初の要素は[0]、2番目の要素は[1]、以下同様に続きます...
方法 2
以下のメソッドを使用すると HTMLCollection が返されます:
document.getElementsByClassName('class_name')[index].value
HTMLCollection インターフェースは、要素（要素の順序はドキュメントフロー内の順序）を含む汎用コレクション（arguments に似た配列風 (array-like) オブジェクト）を表し、そのコレクションから要素を選択するためのメソッドとプロパティも提供します。
HTML DOM の HTMLCollection はライブです（live）。つまり、含まれるドキュメント構造が変更されると、自動的に更新されます。
例
document.getElementsByClassName("searchField")[0].value;
方法 3
タグ名で HTMLCollection を取得します：
document.getElementsByTagName('tag_name')[index].value
例
input タグ名から内容を取得します：
document.getElementsByTagName("input")[0].value;
方法 4
以下は NodeList を返します。NodeList オブジェクトはノードの集合であり、通常は Node.childNodes などのプロパティや document.querySelectorAll などのメソッドによって返されます。
NodeList はライブなコレクションです。つまり、ドキュメント内のノードツリーが変更されると、NodeList もそれに応じて変化します。
document.getElementsByName('name')[index].value
例
要素に設定された name 属性から内容を取得します：
document.getElementsByName("searchTxt")[0].value; // name 属性值为 searchTxt
方法 5
CSS のセレクターを使用して取得します。この方法はより強力です：
document.querySelector('selector').value // selector 是 CSS 选择器
例
例
document.querySelector('.searchField').value; // class で取得
document.querySelector('input').value; // タグ名で取得
document.querySelector('[name="searchTxt"]').value; // name 属性と値で取得
方法 6
querySelectorAll は、CSS セレクターに一致するすべての要素を返すことができ、NodeList です。
document.querySelectorAll('selector')[index].value
例
例
document.querySelectorAll('.searchField')[0].value; // class で取得
document.querySelectorAll('input')[0].value; // タグ名で取得
document.querySelectorAll('[name="searchTxt"]')[0].value; // name 属性と値で取得