![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
JavaScriptでは、特定の要素を取得して操作することが基本となります。
たとえば「特定のバナーだけ表示を切り替える」「クリックされた要素を処理する」といった場面で、classやidを指定した要素取得が必要です。
この記事では、JavaScriptでclassやidを持つ要素を取得する方法をわかりやすく解説します。
特定のclassを持つ要素を取得する
querySelectorを使う方法
|
1 2 3 4 5 6 7 8 |
<div class="campaign_bnr">バナー</div> <script> document.addEventListener('DOMContentLoaded', () => { const targetElement = document.querySelector('.campaign_bnr'); console.log(targetElement); }); </script> |
getElementsByClassNameを使う方法
|
1 2 3 4 5 6 7 8 |
<div class="campaign_bnr">バナー</div> <script> document.addEventListener('DOMContentLoaded', () => { const elements = document.getElementsByClassName('campaign_bnr'); console.log(elements[0]); }); </script> |
getElementsByClassNameは複数要素を取得するため、HTMLCollection（配列のようなもの）で返されます。
そのため、使う際はインデックス指定が必要です。
特定のidを持つ要素を取得する
getElementByIdを使う方法
idはページ内で一意のため、専用のメソッドが用意されています。
|
1 2 3 4 5 6 7 8 |
<div id="campaign_bnr">バナー</div> <script> document.addEventListener('DOMContentLoaded', () => { const targetElement = document.getElementById('campaign_bnr'); console.log(targetElement); }); </script> |
シンプルかつ高速に取得できるため、idの場合はこの方法が最も基本です。
querySelectorを使う方法
|
1 2 3 4 5 6 7 8 |
<div id="campaign_bnr">バナー</div> <script> document.addEventListener('DOMContentLoaded', () => { const targetElement = document.querySelector('#campaign_bnr'); console.log(targetElement); }); </script> |
querySelectorでもid指定が可能です。
classと書き方を統一できます。
要素取得後の基本的な使い方
テキストを変更する
|
1 |
targetElement.textContent = 'テキストを変更しました'; |
デモ
See the Pen JavaScriptで特定のidを持つ要素を取得しテキストを変更する（textContentの使い方） by mkl may (@mkl-may) on CodePen.
classを追加・削除する
|
1 2 |
targetElement.classList.add('active'); targetElement.classList.remove('campaign_bnr'); |
表示切り替えやアニメーション制御でよく使われます。
まとめ
avaScriptで要素を取得する方法はいくつかありますが、基本は以下の通りです。
- class指定 →
querySelectorまたはgetElementsByClassName - id指定 →
getElementByIdまたはquerySelector