JavaScriptでクラス名やIDなどから要素を取得する方法【サンプルコード付き】

JavaScriptを書く際、HTMLの要素を取得するのは必須の行動です。

ただ、要素の取得にもいろいろな方法があって若干混乱したので、この記事にまとめながら整理してみました。

少しずつ動作や戻り値が違うDocmentオブジェクトのメソッドが、全部で7種類あります。

ただし、getElementsByTagNameNSというメソッドは普通のHTMLでは使わないと思うので、説明はしません。

なので、この記事では残りの6種類について説明してみます。

IDから要素を取得するdocument.getElementById(id)

引数：id名
返り値：Elementかnull

指定したidを持つ要素を取得するメソッドです。

同じidを持つ要素は存在しないはずなので、指定したidが存在した場合は返り値はElementオブジェクト、もし存在しなかった場合返り値はnullとなります。

万が一、HTMLに複数の同一idをもつ要素が存在していた場合は、最初の要素だけを返すのが仕様です。

あと、メソッド名の最後の部分はId、Iが大文字の「アイ」で、dは小文字の「ディ」になっています。

両方を大文字にしてしまうとエラーなので気をつけましょう。

以下がサンプルコードです。

See the Pen Get Element 1 by gsg0222 (@gsg0222) on CodePen.

注意点としては、引数を指定する際に#などセレクタのように指定してしまわないことでしょうか。

指定したいidの名前だけを引数に渡しましょう。

Result下部のボタンを押すと、アラートが表示されます。

表示内容はid=”target1″という属性が指定してある要素のtextContentである、text2という文字列です。

クラス名から複数の要素を取得するdocument.getElementsByClassName(names)

引数：1つまたはスペース区切りで複数のclass名
返り値：HTMLCollection

クラス名で要素を取得するメソッドです。

スペース区切りで複数のクラス名を渡すことも可能。

返り値のHTMLCollectionは、Elementの配列みたいなものです。

複数の要素を取得する可能性があるので、メソッド名もElementsと複数形になっています。

また、もし1つも要素が見つからなかった場合は、長さが0のHTMLCollectionが返ってきます。

サンプルを見てもらいましょう。

See the Pen Get Element 2 by gsg0222 (@gsg0222) on CodePen.

クラス名の指定にも、名前だけを指定します。

「.」などはつけないようにしましょう。

ボタンを押すと、target2というクラスを持つliのテキストであるtext3が表示されます。

getElementsByClassNameメソッドの返り値は配列（のようなもの）なので、alertメソッドで文字列を表示する際は、target2[0]のように配列の何番目かを指定する必要があります。

name属性から複数の要素を取得するdocument.getElementsByName(name)

引数：name属性の値
返り値：NodeList

name属性の値で要素を取得するメソッドです。

一応説明を書いていますが、おそらくこのメソッドを使う機会は非常に少ないはずです。

ブラウザごとに動きが異なるようで、ちょっと安定して使える気がしません。

もしこのメソッドでなくてはならないケースが有るのなら、私が教えてもらいたいところです。

一応サンプルコードは貼っておきます。

See the Pen Get Element 3 by gsg0222 (@gsg0222) on CodePen.

タグ名から複数の要素を取得するdocument.getElementsByTagName(name)

引数：タグ名
返り値：HTMLCollection

タグ名で要素を取得するメソッドです。

このメソッドも複数の要素を取得する可能性があるので、メソッド名がElementsと複数形になっています。

使い方はgetElementsByClassNameとほぼ同じで、クラス名の代わりにタグ名を入れることになります。

ただ、getElementsByTagNameでは複数のタグを一度に指定することは出来ません。

例外として、すべての要素を取得する「*」という指定はあります。

以下、サンプルコードです。

See the Pen Get Element 4 by gsg0222 (@gsg0222) on CodePen.

サンブルでは同一のulの中にliが収まっていますが、仮に複数のulがあってliがあちこちに分散していても、すべてのliを持ってきます。

li要素は4個あるので、アラートでは4個と表示されます。

CSSセレクターで要素を取得するdocument.querySelector(selectors)

引数：CSSセレクター
返り値：HTMLElementかnull

残り2つは、メソッド名がget～からquery～に変わります。

query～メソッドでは、引数がCSSセレクターになります。

CSSセレクターは、その名の通りどこに指定したCSSを当てるのかを決める際に利用される文字列です。

例えば、「ul li.target2」みたいな指定になります。

この例だと、ulタグ内のtarget2クラスを持ったliタグという指定です。

querySelectorメソッドでは、指定したCSSセレクターと最初に一致する要素が返り値です。

get～メソッドよりも柔軟な運用が可能なメソッドになります。

See the Pen Get Element 5 by gsg0222 (@gsg0222) on CodePen.

注意点として、get～メソッドでは名前だけを指定していましたが、querySelectorメソッドではCSSセレクターを引数とすることがあげられます。

サンプルのようにクラスを指定する場合は「.target2」といった具合に「.」などをつける必要があるわけです。

CSSセレクターで複数の要素を取得するparentNode.querySelectorAll(selectors)

引数：CSSセレクター
返り値：NodeList

先程のquerySelectorメソッドの、複数要素対応版です。

CSSセレクターに一致した要素を、NodeList（これも配列みたいなもの）に格納して返します。

See the Pen Get Element 6 by gsg0222 (@gsg0222) on CodePen.

ul要素内部のli要素の個数を出力するコードです。

querySelectorAllメソッドはNodeListを返すため、lengthプロパティを持っています。

それを単純に表示しているだけです。

速度優先ならget系、柔軟さならquery系

大まかにわけで、要素取得メソッドにはget～とquery～の2つがあります。

メソッドの実行速度は、get～の方が早いです。

一方、query～はCSSセレクターが使えるので柔軟な運用が可能になります。

速度ならget～、複雑な条件での取得がしたいならquery～と使い分けると良いでしょう。