【JavaScript】要素の取得方法(getElement、querySelector)

はじめに

JavaScriptにおいて、HTMLの要素を取得するには様々な方法があります！
今回はその要素の取得方法に関してまとめました！

ID名を指定して要素を取得するメソッド

document.getElementById()

document.getElementById()は引数にID名を入れることで、そのIDの要素を取得することができます。
同じID名が複数存在する場合には最初の要素のみを取得します。
以下が簡単な例です。
htmlのid='sample'のdiv要素を、jsファイルにて取得して、定数sampleに代入しています。

test.html

<div id='sample'></div>

test.js

const sample = document.getElementById('sample')

class名を指定して要素を取得するメソッド

document.getElementsByClassName()

先ほどのdocument.getElementById()ではID名から要素を取得しましたが、
document.getElementsByClassName()ではクラス名を指定して要素を取得できます。
こちらの場合は、該当する複数の要素を取得することが出来ます！
以下が例です。

test.html

<div class='sample'></div>

test.js

const sample = document.getElementsByClassName('sample')

ID名とclass名どちらを入れても要素を取得出来るメソッド

document.querySelector()

こちらも引数にID名やクラス名を入れることで、要素を取得することができます！
先ほどのgetElementById()やgetElementsByClassName()では、それぞれID名かクラス名どちらかしか指定できませんでした。
しかしdocument.querySelector()ではID名もクラス名も両方指定できます！
しかし例えばID名sampleを指定したい場合、先ほどのdocument.getElementById()とは違って、引数には#sampleと書かなければなりません。
クラス名の場合も同様で.sampleと書きます！
CSSでセレクタを記述する際と同じ書き方です。
document.getElementById()と同じように引数内を'sample'と書いてしまうと、ID名を指しているのかクラス名を指しているのかわかりません。
以下が例です。

test.js

const sample = document.querySelector('#sample')

document.querySelectorAll()

document.querySelector()の場合は、取得出来る要素はひとつのみでしたが、document.querySelectorAll()を使用すると、引数で指定したID名、もしくはクラス名と一致する全ての要素を取得することができます。
以下が例です。

test.html

<div class="hoge"></div>
<div class="foo"></div>
<div class="hoge"></div>

test.js

const hoge = document.querySelectorAll('.hoge')

３つ並んでいるdiv要素のうち、１番目と３番目の要素が取得できます。

余談①

今回は全て、documentから要素を探しました。
(document.querySelectorやdocument.getElementsByClassName等)
しかし、documentではなくelementを指定して要素を取得することもできます。
以下が例です。

test.html

<ul class="hoge">
  <li class="foo"></li>
  <li></li>
  <li></li>
</ul>

test.js

const sample = hoge.getElementsByClassName('foo')

上記の例では、hogeクラスの中にある、fooクラスの要素を取得しています。

余談②

特定のIDもしくはクラス名を指定して、一つの要素を取得したい場合。
getElementByとquerySelectorどちらを使用するべきなのでしょうか。
基本どちらでも良いのですが、
getElementByの方がquerySelectorよりも速度が早いらしいです。
でも人がわからないレベルらしい。。
少しでも早くしたいって方はgetElementByを使った方が良いかも？？

さいごに

今回はID名やクラス名を指定しての取得の仕方のみ解説しましたが、他にもタグ名を指定して取得する方法などがあります。
以下の記事がとても詳しいので、深掘りしたい方にはおすすめです！
https://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4