0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript 要素の取得 getElementById と querySelectorの違い

Last updated at Posted at 2020-12-03

#要素の取得の違い
DOM操作をするときに必須となる、要素の取得ですが教材によってgetElementById を使っていたり、quertSelectorを使っていたりと、どちらがいいの?と疑問を持ちました。
やっていることは同じように見えるのに、使い分ける意味は?

  • getElementById
     その名前の通り、idを指定して要素を取得する。
      返り値は null / HTMLElement

  • querySelector
     要素の取得には、要素名、クラス名、idとCSSのセレクタとなり得るものは大体使える。
     該当する要素が複数ある場合は最初の要素を取得する。
    返り値は HTMLElement

###getElementsBy~
getElementByTagNamegetElementByClassName
返り値が配列(のようなもの)で返されます。
取得した各要素に操作をする場合はforループ等で回す必要があります。

##まとめと考察
getElementBy~の方が処理が速いそうですが、ブラウザの処理速度が速くなっているので、体感できない程度の差のようです。
結局どちらがいいかはケースバイケースですが、getElementBy~は厳格でパフォーマンスが高い。
querySelectorは柔軟で気軽に使える。
といったイメージでいいのでしょうか?

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?