document.querySelectorを使うと、タグに書かれているクラス名などを使って要素をつかむことができます。

getElementByIdのときはタグに付与されているidを指定していましたが、querySelectorではクラス名やhtmlの要素などをより柔軟に指定できるのがよいところです。

早速サンプルです。サンプルの中では.boxというクラス名を指定して、class = 'box'に該当するタグの文字色を変更しています。

See the Pen querySelectorで要素を取得するサンプル by Makoto Ohnami (@zohnami) on CodePen.

まずはhtmlを見てみましょう。

box1〜3にそれぞれboxというクラスが設定されています。

<div class="container">
  <div class="box" id="box1">
    box1
  </div>
  <div class="box" id="box2">
    box2
  </div>
  <div class="box" id="box3">
    box3
  </div>
</div>

次はjavascriptを見てみましょう。

以下のようにquerySelector('.box')でclass = 'box'の要素をひとつだけ取得してbox1という定数に格納しています。

その後はbox1のスタイルを赤色に変えているだけですね。

getElementByIdのときとちがって、クラス名などを指定するときに.をつけています。

querySelectorを使うときはcssを書くときと同じ書き方をするんですね。

const box1 = document.querySelector('.box');
box1.style.color = 'red';

cssでの指定方法と同じ書き方で要素をつかむことができる、ということはnth-child(3)みたいなものも自由に設定することが可能です。

サンプルのjsファイルの後半ではquerySelectorに.box:nth-child(3)と指定して、3番目のboxクラスを取得しています。

const box3 = document.querySelector('.box:nth-child(3)');
box3.style.color = 'blue';

このquerySelectorではidも指定することができます。ただし、getElementByIdのときと異なり、idの前に#を指定する必要があります。

const box2 = document.querySelector('#box2');
box2.style.fontWeight = 'bold';

querySelectorに指定した条件に合致するものが複数存在した場合はページ内の一番最初のものだけを取得することになります。

使用頻度でいうと、getElementByIdよりもquerySelectorのほうが使用頻度は多い印象があります。

getElementByIdよりも柔軟性が高いのがよいところですが、その分設定間違いがないように書いていく必要がありますね。

この記事の環境情報

  • Google Chrome 108.0.5359.124