Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

【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')

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

余談①

今回は全て、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もしくはクラス名を指定して、一つの要素を取得したい場合。
getElementByquerySelectorどちらを使用するべきなのでしょうか。
基本どちらでも良いのですが、
getElementByの方がquerySelectorよりも速度が早いらしいです。
でも人がわからないレベルらしい。。
少しでも早くしたいって方はgetElementByを使った方が良いかも??

さいごに

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
19
Help us understand the problem. What are the problem?