jQueryを使わずにinputの値(value)を取得する方法！Javasctipt

久しぶりにinputのvalueを取得する必要があり、調べていたのですがjQueryばかりが検索に引っかかったのでバニラJSでinputの値(value)を取得しようかと思います。

jQueryで取得する場合はこちら。

jQuerry .val()について：Javascript超初心者の勉強 .val()が使われているプログラミングを見かけたのですが、どのように使うのかわからなかったので調べてみました。 .val()に...

jQueryを使わずにinputの値(value)を取得する

jQueryを使わなくても簡単にinputの値(value)を取得することができます。

querySelectorを使い取得する

脱jQueryに便利なquerySelectorを使うと簡単にinputの値を取得できます。

サンプルコード

querySelectorを使ってinputの値を取得する簡単な例です。

htmlの例

<input class="company" name="contact[company_name]"type="text" />

Javascript

const company = document.querySelector("input[name='contact[company_name]']");
console.log(company.value);

上記のように取得したい要素をquerySelectorで取得し、取得した要素.valueでinputの値を取得することが可能です。

上記の例はnameでしたがquerySelectorを使えばidやclassでも簡単に値を取得できます。

Javascript

const company2 = document.querySelector("input.company");
console.log(company2.value);

querySelectorについては以下でまとめています。

querySelector()とは？超便利なquerySelector()メソッドを使ってみる！Javascriptの勉強 便利だなと思ったquerySelector()を使いこなせるようにいくつか使い方をgetElementById() や getElem...

またはじめからinputの値のみ取得する場合は末尾に.valueをつければ取得できます。

Javascript

const company3 = document.querySelector("input.company").value;
console.log(company3);

おわり

本当にquerySelector便利。querySelectorでinputの値も一行でとれますね。querySelectorを使ったコードも数年前に比べるとだいぶ増えてきましたね。また思ったよりjQueryもなくならずでした。