はじめに

フロントエンド講習初級講座を担当している（@suzu_travas）です。
今回は初級講座で実施した内容の中の一部をご紹介します。

フロントエンド講習とは？

弊社OBGで毎月第2土曜日11:00〜19:00に行っている講習です。
主にHTML,CSS,JavaScriptを使ったフロントエンドに関する講習で通常オンラインでの開催ですが三か月に一度本社でのオフライン開催も行っています。

getElementById

指定したid属性の要素を取得します。
以下のコードではid="id-name-1"のdiv要素を取得します。

<div id="id-name-1" class="class-name"></div>
<div id="id-name-2" class="class-name"></div>

const div = document.getElementById('id-name-1');
console.log(div); //<div id="id-name-1" class="class-name"></div>

querySelector

指定したCSSセレクターに一致する最初の要素を取得します。
例えば以下のコードでは取得できるのは一つ目のdiv要素になります。

<div id="id-name-1" class="class-name"></div>
<div id="id-name-2" class="class-name"></div>

const div = document.querySelector('.class-name');
console.log(div); //<div id="id-name-1" class="class-name"></div>

querySelectorでは一致する要素のうち最初の1つのみを取得する。
すべて取得したい場合は次に紹介するquerySelectorAllを使用します。

querySelectorAll

指定したセレクターに一致する要素のリストを取得します。(NodeList)
例えば以下のコードでは、2つのdiv要素をリストで取得できます。

<div id="id-name-1" class="class-name"></div>
<div id="id-name-2" class="class-name"></div>

const div = document.querySelectorAll('.class-name');
console.log(div[0]); //<div id="id-name-1" class="class-name"></div>
console.log(div[1]); //<div id="id-name-2" class="class-name"></div>

NodeListは配列のようにインデックスでアクセスできるため、
複数該当する要素がある場合でも2つ目以降の要素を取得できます。
またforEachが使用できるのでループ処理にも向いています。

※NodeListは配列と似ていますが、
map・filter・pushなどが使えないという特徴があります。

querySelectorAllは該当する要素すべてをリストで取得する。

どれを使えばいい？

idで単一要素を取得する → getElementById
CSSセレクタで1つ取得する → querySelector
CSSセレクタで複数取得する → querySelectorAll

自分の場合は単体取得したい場合はgetElementByIdを使ってidで取得・複数取得する場合はquerySelectorAllでクラス名などで取得するようにしています。

オブジェクティブグループでは X（旧 Twitter）の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。