document.getElementByIdを使うと、タグに書かれているidを使って要素をつかむことができます。

早速サンプルです。サンプルの中ではbox2というidを指定して、id = 'box2'のタグだけ文字色を変更しています。

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

まずはhtmlを見てみましょう。idの部分は同じ値を設定していないのがポイントです。

<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を見てみましょう。

以下のようにgetElementById('box2')でid = 'box2'の要素を取得してbox2という定数に格納しておきます。

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

ポイントはgetElementByIdでidを指定するときに#をつけないことです。

cssやaタグのアンカーなどでidを指定するときは#をつけますがgetElementByIdでidを指定するときは#をつけないで使います。

紛らわしいですが、そういう仕様・決まり事になっているんですね。

const box2 = document.getElementById('box2');
box2.style.color = 'red';

idというくらいで、htmlのひとつのページの中では同じ値を複数設定することは推奨されていません。

想定していない動作になってしまう場合があるので、idはすべて一意にユニークに定まる値を設定していきましょう。

この記事の環境情報

  • Google Chrome 108.0.5359.124