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

JavaScriptで要素取得アイキャッチプログラム
スポンサーリンク

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~と使い分けると良いでしょう。

JavaScriptを初歩から学びたいなら、次の本とサイトがおすすめです
ブラウザを使って少しずつJavaScriptを学ぶことができる本です。
コンソールに文字列を表示することから始まって、最終的にはAPIを使いこなして天気予報を表示することまでできるようになります。
ブラウザでの利用ではなく、Node.jsなどよりプログラムとしての勉強をしたいならこちらのサイトがおすすめ。
細かな言語仕様をしっかり説明してくれるサイトです。無料でこんなサイトを作ってくれる方がいることに感謝したくなります。
書籍版もあるので、手元にものが欲しい人はそちらを入手しても良いかもしれません。

コメント

タイトルとURLをコピーしました