- はじめに
- ●querySelectorとgetElementByIdの基本
- ●querySelectorとgetElementByIdの使い方
- ○サンプルコード1:querySelectorで要素を取得する
- ○サンプルコード2:getElementByIdで要素を取得する
- ○サンプルコード3:querySelectorAllで複数の要素を取得する
- ○サンプルコード4:querySelectorでクラス名を持つ要素を取得する
- ○サンプルコード5:querySelectorで属性値を持つ要素を取得する
- ○サンプルコード6:querySelectorで複数条件を満たす要素を取得する
- ○サンプルコード7:getElementByIdで要素のプロパティを操作する
- ○サンプルコード8:querySelectorで要素のプロパティを操作する
- ○サンプルコード9:querySelectorで要素のスタイルを操作する
- ○サンプルコード10:querySelectorでイベントリスナーを設定する
- ●querySelectorとgetElementByIdの注意点
- ●querySelectorとgetElementByIdの応用例
- ●カスタマイズ方法
- まとめ
はじめに
Webページを作成していると、JavaScriptでDOM要素を操作することがよくあります。
そんな時に役立つのが、querySelectorとgetElementByIdです。
この記事を読めば、JavaScriptでDOM要素を簡単に操作する方法を学ぶことができるようになります。
●querySelectorとgetElementByIdの基本
○querySelectorとは
querySelectorは、CSSセレクタを使ってDOM要素を取得するためのメソッドです。
引数に指定したセレクタに一致する最初の要素を返します。
複数の要素を取得したい場合は、querySelectorAllメソッドを使用します。
○getElementByIdとは
getElementByIdは、指定したID属性値を持つ要素を取得するためのメソッドです。
ID属性値はページ内で一意であるため、取得できる要素は1つだけです。
●querySelectorとgetElementByIdの使い方
○サンプルコード1:querySelectorで要素を取得する
このコードでは、querySelectorを使ってid属性が”title”の要素を取得しています。
この例では、該当する要素のテキストをコンソールに出力しています。
const titleElement = document.querySelector('#title');
console.log(titleElement.textContent);
○サンプルコード2:getElementByIdで要素を取得する
このコードでは、getElementByIdを使ってid属性が”title”の要素を取得しています。
この例では、該当する要素のテキストをコンソールに出力しています。
const titleElement = document.getElementById('title');
console.log(titleElement.textContent);
○サンプルコード3:querySelectorAllで複数の要素を取得する
このコードでは、querySelectorAllを使ってclass属性が”box”の要素をすべて取得しています。
この例では、取得した要素の数をコンソールに出力しています。
const boxElements = document.querySelectorAll('.box');
console.log(boxElements.length);
○サンプルコード4:querySelectorでクラス名を持つ要素を取得する
このコードでは、querySelectorを使ってclass属性が”box”の要素を取得しています。
この例では、該当する要素のテキストをコンソールに出力しています。
const boxElement = document.querySelector('.box');
console.log(boxElement.textContent);
○サンプルコード5:querySelectorで属性値を持つ要素を取得する
このコードでは、querySelectorを使ってdata-index属性が”1″の要素を取得しています。
この例では、該当する要素のテキストをコンソールに出力しています。
const indexElement = document.querySelector('[data-index="1"]');
console.log(indexElement.textContent);
○サンプルコード6:querySelectorで複数条件を満たす要素を取得する
このコードでは、querySelectorを使って、class属性が”item”でかつdata-type属性が”special”の要素を取得しています。
この例では、該当する要素のテキストをコンソールに出力しています。
const specialItem = document.querySelector('.item[data-type="special"]');
console.log(specialItem.textContent);
○サンプルコード7:getElementByIdで要素のプロパティを操作する
このコードでは、getElementByIdを使ってid属性が”title”の要素を取得し、要素のテキストを変更しています。
const titleElement = document.getElementById('title');
titleElement.textContent = '変更されたタイトル';
○サンプルコード8:querySelectorで要素のプロパティを操作する
このコードでは、querySelectorを使ってid属性が”title”の要素を取得し、要素のテキストを変更しています。
const titleElement = document.querySelector('#title');
titleElement.textContent = '変更されたタイトル';
○サンプルコード9:querySelectorで要素のスタイルを操作する
このコードでは、querySelectorを使ってclass属性が”box”の要素を取得し、要素の背景色を変更しています。
const boxElement = document.querySelector('.box');
boxElement.style.backgroundColor = 'red';
○サンプルコード10:querySelectorでイベントリスナーを設定する
このコードでは、querySelectorを使ってid属性が”button”の要素を取得し、ボタンがクリックされたときにアラートを表示するイベントリスナーを設定しています。
const buttonElement = document.querySelector('#button');
buttonElement.addEventListener('click', () => {
alert('ボタンがクリックされました');
});
●querySelectorとgetElementByIdの注意点
○querySelectorの限界
querySelectorは非常に便利ですが、CSSセレクタによって表現できない要素の検索ができません。
その場合は、他のDOM操作メソッドを組み合わせて使用する必要があります。
○getElementByIdの制約
getElementByIdは、ID属性値を指定して要素を取得しますが、ID属性値はページ内で一意である必要があります。
ID属性値が重複している場合は、正しく動作しないことがあります。
○ブラウザの互換性
querySelectorとgetElementByIdは、現代の主要なブラウザではほぼサポートされています。
ただし、非常に古いブラウザではサポートされていないことがあるため、対応が必要な場合は別の方法を検討してください。
●querySelectorとgetElementByIdの応用例
○サンプルコード11:querySelectorを使ったタブメニュー
このコードでは、querySelectorを使ってタブメニューを作成しています。
タブをクリックすると、対応するコンテンツが表示されます。
<div class="tabs">
<button class="tab" data-target="content1">タブ1</button>
<button class="tab" data-target="content2">タブ2</button>
</div>
<div class="contents">
<div id="content1" class="content">コンテンツ1</div>
<div id="content2" class="content" hidden>コンテンツ2</div>
</div>
<script>
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const targetId = tab.dataset.target;
const targetContent = document.getElementById(targetId);
document.querySelectorAll('.content').forEach(content => {
content.hidden = true;
});
targetContent.hidden = false;
});
});
</script>
○サンプルコード12:getElementByIdを使った簡易的なアコーディオンメニュー
このコードでは、getElementByIdを使って簡易的なアコーディオンメニューを作成しています。
タイトルをクリックすると、対応するコンテンツが開閉します。
<div>
<h3 id="accordion1">タイトル1</h3>
<div class="content">コンテンツ1</div>
</div>
<div>
<h3 id="accordion2">タイトル2</h3>
<div class="content" hidden>コンテンツ2</div>
</div>
<script>
const accordion1 = document.getElementById('accordion1');
const accordion2 = document.getElementById('accordion2');
accordion1.addEventListener('click', () => {
const content = accordion1.nextElementSibling;
content.hidden = !content.hidden;
});
accordion2.addEventListener('click', () => {
const content = accordion2.nextElementSibling;
content.hidden = !content.hidden;
});
</script>
○サンプルコード13:querySelectorでフォームの入力値を取得する
このコードでは、querySelectorを使ってフォームの入力値を取得し、コンソールに出力しています。
<form id="sample-form">
<input type="text" id="input-text">
<button type="submit">送信</button>
</form>
<script>
const form = document.querySelector('#sample-form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const inputText = document.querySelector('#input-text').value;
console.log(inputText);
});
</script>
●カスタマイズ方法
○querySelectorとgetElementByIdを組み合わせる
querySelectorとgetElementByIdはそれぞれの特徴を活かして組み合わせることができます。
例えば、親要素をgetElementByIdで取得し、子要素をquerySelectorで取得することができます。
○querySelectorとgetElementByIdを組み合わせる
querySelectorとgetElementByIdは、それぞれの特徴を活かして組み合わせることができます。
例えば、親要素をgetElementByIdで取得し、子要素をquerySelectorで取得する方法があります。
このコードでは、親要素をgetElementByIdで取得し、その子要素であるpタグをquerySelectorで取得して、テキストを変更しています。
<div id="parent">
<p>子要素</p>
</div>
<script>
const parent = document.getElementById('parent');
const child = parent.querySelector('p');
child.textContent = '新しい子要素';
</script>
○querySelectorでカスタムデータ属性を操作する
HTML5では、カスタムデータ属性を使って要素に任意の情報を付与することができます。
querySelectorを使って、カスタムデータ属性を操作することもできます。
この例では、ボタンをクリックすると、カスタムデータ属性をもとにアラートが表示されます。
<button class="alert-button" data-alert-message="ボタン1をクリックしました。">ボタン1</button>
<button class="alert-button" data-alert-message="ボタン2をクリックしました。">ボタン2</button>
<script>
const buttons = document.querySelectorAll('.alert-button');
buttons.forEach(button => {
button.addEventListener('click', () => {
const message = button.dataset.alertMessage;
alert(message);
});
});
</script>
まとめ
querySelectorとgetElementByIdは、それぞれ異なる特徴を持ち、使い分けが重要です。
本記事では、querySelectorとgetElementByIdの基本的な使い方と注意点、応用例やカスタマイズ方法を解説しました。
どちらのメソッドも適切に使い分けることで、効率的なJavaScriptコードを書くことができます。
今後の開発でぜひ活用してみてください。