見出し画像

DOM操作における要素取得について

とうふ

Javascriptを扱ううえで最も基本の操作ともいえるHTMLの要素取得のメソッド

  • getElementById()

  • querySelector()

この2つのメソッドを学習した際に思ったこと、

querySelector()だけで良いのではないか？

これについて、現時点での理解を書いてみます。


getElementByIdメソッド

HTMLの中で、指定したid属性が一致するelementオブジェクトを取得するメソッド。HTMLの中で、idは一つしか指定できないので、idが指定されているタグの要素取得には、このメソッドを使えばよい。

<html>
<head>
 <title>example1</title>
</head>
<body>

 <p id="id">IDの要素取得</p>

 <script>

  const ex = document.getElementById("id");

  console.log(ex);
  <!-- 出力結果　→　IDの要素取得 -->

 </script>
</body>
</html>

querySelectorメソッド

HTMLの中で、指定したセレクターが一致するelementオブジェクトを取得するメソッド。指定するセレクターは、id属性でもclass属性でもよい。
引数の値には、idなら '#' を、 classなら'. 'をつけて指定する。

<html>
<head>
 <title>example2</title>
</head>
<body>

 <p id="id">IDの要素取得</p>
 <p class="class">Classの要素取得</p>

 <script>

  const ex1 = document.querySelector("#id");
  const ex2 = document.querySelector(".class");

  console.log(ex1);
  <!-- 出力結果　→　IDの要素取得 -->

  console.log(ex2);
  <!-- 出力結果　→　Classの要素取得 -->


 </script>
</body>
</html><html>

どちらを使えばよいか

動作に関しては、どちらを用いても問題はなさそうです。なのでどちらを使ってもよさそう、というのが自分の現時点での理解になります。
ただ、何も考えずquerySelectorのみを使うのは、良くなさそうな雰囲気がするので、以下の点を踏まえて使い分けることにしました。

読み込みの速さ

本当にわずかな差ではあるみたいですが、querySelectorよりgetElementByIdのほうが読み込みが速いようです。単純に考えても、getElementByIdのほうが、一つのプロパティ（id）にのみ対応するメソッドなのでイメージしやすいかなと思います。
ただ速いといっても本当にごくわずか差なので、普通に使用するくらいでは（大規模開発等でない限り）では、全く気にならない程度の差であるようです。

querySelectorの注意

querySelectorはid要素、class要素どちらでも要素を取得できるが、class要素を取得する際は一番初めの要素のみ取得するので、全てのclass属性の要素を取得する場合,querySelectorAll を使用する。
また、querySelectorはCSSセレクターで要素を取得するので、CSSセレクターを指定できない場合は、要素の取得に工夫が必要です。

まとめ

querySelectorは汎用性が高いので便利であるが、id要素の取得はなるべく、getElementByIdメソッドを使うようにしています。ただ、画面の動作の違いはないため、どちらを使っても問題はなさそうです。
実際に大きな開発等ではどのように使い分けられているのか、何かの機会があったら開発者に聞いてみたいものです。


いいなと思ったら応援しよう！