JavascriptからHTMLの要素を取得する方法

はじめに

この記事は、フロントエンド超超超超超超超超超超初心者が書いたものである。
情報が誤っていることが発覚した場合は修正を行う。

HTMLの要素

例では、下の通りテキストボックスを用意した。
このテキストボックスをJavascriptで取得して、変数に入れたい。

html

<input type="text" id="txtUserId" name="nmUserId" class="csUserId">

JavascriptからHTMLの要素を取得する方法はいろいろある

document.getElementByIdを使う。

inputのidが"txtUserId"なので、document.getElementById('txtUserId') と書く。

js

var varUserId = document.getElementById('txtUserId');

document.getElementsByNameを使う。

inputのnameが"nmUserId"なので、document.getElementsByName('nmUserId') と書く。
　⇒　getElement s ByName と、メソッド名が複数形になっているので、戻り値は配列。

js

var varUserId = document.getElementsByName('nmUserId');
alert(varUserId[0].value); // 配列で帰ってくるので、要素番号を指定

document.getElementsByClassNameを使う。

inputのnameが"csUserId"なので、document.getElementsByClassName('csUserId') と書く。
　⇒　getElement s ByClassName と、メソッド名が複数形になっているので、戻り値は配列。

js

var varUserId = document.getElementsByClassName('csUserId');
alert(varUserId[0].value); // 配列で帰ってくるので、要素番号を指定

querySelectorを使う。

querySelectorは、getElement系と違って 引数の書き方 を変えれば、Id名で取得するのかName名で取得するのか変更できる。

IDを指定する場合

IDで指定したい場合は、検索対象のIDの名前の先頭に # をつける。

js

var varUserId = document.querySelector('#txtUserId');

Nameを指定する場合

単に検索対象のNameの名前を指定するだけではダメで、
「検索対象はinputのnameで！」 といったような指定がいる模様。
※こちらの場合、戻り値は配列ではない。

js

var varUserId = document.querySelector('input[name="nmUserId"]');

Classを指定する場合

Classで指定したい場合は、検索対象のClassの名前の先頭に .(ドット) をつける。
※こちらの場合、戻り値は配列ではない。

js

var varUserId = document.querySelector('.csUserId');

#ここから以下はメモのメモ。

ぼんやりしかわからないところ

document って何？

「表示しているHTML」のelementが全て詰め込まれている"オブジェクト"のこと。

element って何？

要素。 < で始まり > で終わっているヤツ。
HTMLに書いてあるモノ一つ一つのこと。

getElementById とか querySelector って何？

「引数と一致する名前のelementを（documentの中を先頭から末尾にかけて）検索しに行きますよ」っていうメソッド。
elementにidやNameなど、検索対象となる値が指定されていないと検索できない。
ちなみに同じidのelementが複数ある場合は、先頭のほうに記述してあるものを取ってくるらしい。

getElementById と querySelector 、どっちを使えばいいの？

前者のほうが高速らしい。なので、基本的に前者。
でも後者を使うと便利になるケースもままあるらしい。
この辺は実体験するに至ったら追記。