はじめに
この記事は、フロントエンド超超超超超超超超超超初心者が書いたものである。
情報が誤っていることが発覚した場合は修正を行う。
HTMLの要素
例では、下の通りテキストボックスを用意した。
このテキストボックスをJavascriptで取得して、変数に入れたい。
<input type="text" id="txtUserId" name="nmUserId" class="csUserId">
JavascriptからHTMLの要素を取得する方法はいろいろある
document.getElementByIdを使う。
inputのidが"txtUserId"なので、document.getElementById('txtUserId') と書く。
var varUserId = document.getElementById('txtUserId');
document.getElementsByNameを使う。
inputのnameが"nmUserId"なので、document.getElementsByName('nmUserId') と書く。
⇒ getElement s ByName と、メソッド名が複数形になっているので、戻り値は配列。
var varUserId = document.getElementsByName('nmUserId');
alert(varUserId[0].value); // 配列で帰ってくるので、要素番号を指定
document.getElementsByClassNameを使う。
inputのnameが"csUserId"なので、document.getElementsByClassName('csUserId') と書く。
⇒ getElement s ByClassName と、メソッド名が複数形になっているので、戻り値は配列。
var varUserId = document.getElementsByClassName('csUserId');
alert(varUserId[0].value); // 配列で帰ってくるので、要素番号を指定
querySelectorを使う。
querySelectorは、getElement系と違って 引数の書き方 を変えれば、Id名で取得するのかName名で取得するのか変更できる。
IDを指定する場合
IDで指定したい場合は、検索対象のIDの名前の先頭に # をつける。
var varUserId = document.querySelector('#txtUserId');
Nameを指定する場合
単に検索対象のNameの名前を指定するだけではダメで、
「検索対象はinputのnameで！」 といったような指定がいる模様。
※こちらの場合、戻り値は配列ではない。
var varUserId = document.querySelector('input[name="nmUserId"]');
Classを指定する場合
Classで指定したい場合は、検索対象のClassの名前の先頭に .(ドット) をつける。
※こちらの場合、戻り値は配列ではない。
var varUserId = document.querySelector('.csUserId');
ここから以下はメモのメモ。
ぼんやりしかわからないところ
document って何？
「表示しているHTML」のelementが全て詰め込まれている"オブジェクト"のこと。
element って何？
要素。 < で始まり > で終わっているヤツ。
HTMLに書いてあるモノ一つ一つのこと。
getElementById とか querySelector って何？
「引数と一致する名前のelementを（documentの中を先頭から末尾にかけて）検索しに行きますよ」っていうメソッド。
elementにidやNameなど、検索対象となる値が指定されていないと検索できない。
ちなみに同じidのelementが複数ある場合は、先頭のほうに記述してあるものを取ってくるらしい。
getElementById と querySelector 、どっちを使えばいいの？
前者のほうが高速らしい。なので、基本的に前者。
でも後者を使うと便利になるケースもままあるらしい。
この辺は実体験するに至ったら追記。