[JavaScript]querySelectorでform要素の値を取得する方法

querySelector使ってます。便利ですよね。

特定の要素を取得する時に活躍してくれますが、特定フォーム内に入力された値を取得する記事は見当たらなかったなので備忘録を兼ねてメモ。

getElementByIdじゃなくてquerySelectorで値を取得したいんだ

formの要素の値をJavaScriptで取得、のようなキーワードを入力するとgetElementByIdを使った方法がよくヒットします。

でも、querySelectorで取得したいんですね。もうgetなんて使いたくないんだ。

コード

というわけで、querySelectorを使ってform内の要素に入力された値を取得します。

前提条件として、フォームのクラスは.input、ボタンのクラスは.buttonとします。

document.querySelector('.button').addEventListener('click', function(){
    var inputText = document.querySelector('.input').value
    console.log(inputText) =>入力された値を出力
})

肝はquerySelectorの後に続くvalueメソッドです。これで任意のform内に入力された値を出力することができます。