こんにちは、フローです。
今回は、JavaScriptの非常に強力で便利な機能、
「querySelector()」について解説します。
querySelector()とは？
CSSのセレクターを使用して、ドキュメント内の特定の要素を取得するためのメソッドです。
これを使えば、ID、クラス名、タグ名など、
様々な方法で要素を探し出すことができます。
どんな時に使うのか？
querySelector()は、HTMLドキュメントから特定の要素を探し出すときに使用します。
例えば、特定のIDを持つ要素を取得したり、
あるクラスを持つ要素を探したり、特定のタグ名の要素を取得したりするときに使います。
querySelector()の使い方
それでは、具体的な使い方を見ていきましょう。次の3つのパターンを例にします。
IDで要素を取得する
次のコードは、IDを使って要素を取得しています。
var element = document.querySelector('#myId');
このコードを実行すると、IDが”myId”の要素が取得されます。
パターン2: クラス名で要素を取得する
次に、クラス名を使って要素を取得する例です。
var element = document.querySelector('.myClass');
このコードを実行すると、
クラス名が”myClass”の最初の要素が取得されます。
タグ名で要素を取得する
最後に、タグ名を使って要素を取得する例です。
var element = document.querySelector('p');
このコードを実行すると、最初の<p>タグ（段落）の要素が取得されます。
querySelector()の注意点
querySelector()を使う際の注意点として、
存在しないセレクタを指定した場合、nullが返されます。
それにより、取得した要素に対して何らかの処理を行うとエラーが発生します。
// このセレクタは存在しないため、エラーになる
var element = document.querySelector('.nonexistentClass');
element.style.color = 'blue';
上記のコードでは、存在しないクラス名を指定しているため、エラーが発生します。
まとめ
今回はJavaScriptで特定の要素を取得するためのメソッド、
「querySelector()」について学びました。
CSSのセレクタを用いて、ID、クラス名、タグ名などで要素を取得できるのが特徴です。
ただし、存在しないセレクタを指定するとエラーになるため、セレクタが正しいかどうか常に確認しましょう。
皆さんがこれからJavaScriptを学んでいく上で、
querySelector()はとても重要な機能です。
ぜひ理解して、自分のコードに取り入れてみてください。
レッツチャレンジ！
最近のコメント