querySelector()

クエリセレクター（DOM操作）

意味要素を検索・取得

querySelector()とは？

querySelectorメソッドは、指定したCSSセレクタに一致する最初の要素をドキュメントから取得します。

querySelector()の具体的な使い方

クラス名で最初の要素を取得し表示する例

<button onclick='showFirstElementWithClass()'>querySelectorの使用例</button>
<script>
function showFirstElementWithClass() {
  let element = document.querySelector('.myClass');
  alert('myClassクラスの最初の要素: ' + element.textContent);
}
</script>
<div class='myClass'>要素1</div>
<div class='myClass'>要素2</div>

クラス名'myClass'に一致する最初の要素を取得し、そのテキスト内容をアラートで表示します。

複雑なCSSセレクタを使用して要素を取得する例

let element = document.querySelector('ul.menu > li:nth-child(2) a');
console.log('選択された要素のテキスト:', element ? element.textContent : '要素が見つかりません');

👇出力結果

選択された要素のテキスト: メニュー項目2

クラス'menu'を持つul要素の2番目のli要素内のa要素を選択し、そのテキスト内容をコンソールに出力します。

querySelector()に関するよくある質問

Q. 複数の要素を取得できますか？

A. いいえ、querySelectorは最初に一致する要素のみを返します。複数の要素を取得するにはquerySelectorAllを使用してください。

Q. CSSセレクタを使用できますか？

A. はい、querySelectorは有効なCSSセレクタを引数として受け取ります。例えば、'div.className'や'#idName > p'などが使えます。

Q. 要素が見つからない場合は？

A. 一致する要素が見つからない場合、nullを返します。エラーは発生しません。

querySelector()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのquerySelector()やlastChild、Document、removeChild()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。