JavaScriptのセレクタ名とは？
Webページを構成するHTML要素を操作する際に、JavaScriptは「セレクタ」を用いて特定の要素を選び出します。このセレクタに指定する名前を「セレクタ名」と呼びます。セレクタ名には、idやclass属性の値などが用いられますが、JavaScriptで効果的にDOM操作を行うには、それぞれの属性を適切に使い分ける必要があります。
idとclassの使い分けのルール
結論から言うと、JavaScriptで使用するセレクタ名はidで、CSSで使用するセレクタはclassで設定するというルールがあります。もちろん、classをJavaScript、idをCSSで使用することも可能ですが、それぞれの特徴を踏まえると、この使い分けが推奨されます。
idセレクタ
- ページ内で一意の要素に付与する
- JavaScriptで特定の要素を直接操作したい場合に最適
メリット
- 一意の要素にアクセスできるため、意図しない要素を操作してしまうリスクが少ない
- 高速に動作する
デメリット
- 同じidを複数の要素に付与できないため、共通のスタイルや動作を適用したい場合には不向き
HTMLでの記述例
<div id="main-content">メインコンテンツ</div>JavaScriptでの記述例
const mainContent = document.getElementById("main-content");
console.log(mainContent.textContent); // 出力結果: メインコンテンツ
classセレクタ
- 複数の要素に共通して付与できる
- CSSでスタイルを適用したり、JavaScriptで複数の要素に対して同じ操作を行いたい場合に最適
メリット
- 複数の要素に同じclassを付与することで、効率的にスタイルや動作を適用できる
デメリット
- JavaScriptでclassを指定して要素を取得する場合、複数の要素が取得される可能性があるため、注意が必要
HTMLでの記述例
<ul>
<li class="list-item">項目1</li>
<li class="list-item">項目2</li>
<li class="list-item">項目3</li>
</ul>JavaScriptでの記述例
const listItems = document.querySelectorAll(".list-item");
listItems.forEach(item => {
console.log(item.textContent); // 項目1、項目2、項目3と順番に出力される
});
idとclassの使い分けの例
例えば、以下のようなHTML構造のWebページがあるとします。
<header id="header"></header>
<main>
<article class="article"></article>
<article class="article"></article>
<aside id="sidebar"></aside>
</main>
<footer id="footer"></footer>
この場合、header、sidebar、footerはそれぞれページ内で一つしかない要素なので、idを付与します。一方、articleは複数の要素が存在するため、classを付与します。そして、JavaScriptでこれらの要素にアクセスする際には、idはgetElementById、classはquerySelectorAllを用いることで、効率的かつ的確に要素を取得することができます。
まとめ
JavaScriptで使用するセレクタ名は、idとclassのどちらを使用するべきか、状況に応じて判断する必要があります。基本的には、idはページ内で一意の要素に、classは共通のスタイルや動作を適用したい複数の要素に利用する、という使い分けを心がけましょう。
参考資料
関連QA
Q1: idとclassの両方を同じ要素に付与することはできますか？
A1: はい、可能です。HTMLの仕様上、idとclassは同じ要素に同時に付与することができます。ただし、JavaScriptで要素を操作する際には、idを優先して使用することをおすすめします。
Q2: idやclassを使わずに要素を取得することはできますか？
A2: はい、可能です。タグ名や属性などを指定して要素を取得することもできます。しかし、idやclassを利用する方が一般的で、コードの可読性も高まります。
Q3: JavaScriptのフレームワークでは、idやclassの使い方は異なりますか？
A3: フレームワークによっては、独自のセレクタやデータバインディングの仕組みを持っている場合があります。そのため、利用するフレームワークのドキュメントを確認することが重要です。
その他の参考記事:jquery eq 取得