JavaScript ・ DOM操作
querySelector()
CSSセレクタで要素を取得する
CSSと同じセレクタを使って、HTMLの要素を取得します。JavaScriptで画面を操作するときの最初の一歩です。
01
サンプルコード
HTML
1<h1 id="title">メニュー</h1>
2<ul>
3 <li class="item">ブレンド</li>
4 <li class="item">カフェラテ</li>
5</ul>
JS
1const title = document.querySelector('#title');
2title.style.color = '#b68235';
3
4const items = document.querySelectorAll('.item');
5console.log(items.length + '個の要素');
6console.log(items[0]);
02
実行結果
ブラウザでの表示
コンソール
- console.log() の出力がここに表示されます
03
解説
document.querySelector('セレクタ') は、CSSと同じ書き方で要素を探し、最初に見つかった1つを返します。id なら #title、クラスなら .item のように書きます。
当てはまる要素をすべて取得するには querySelectorAll() を使います。結果は配列に似た NodeList で、length や forEach() が使えます。
見つからなかったときは null が返ります。そのまま操作するとエラーになるため、要素があるか確認してから使うと安全です。
04
応用例・注意点
要素を取得する主なメソッド
| メソッド | 説明 |
|---|---|
querySelector(セレクタ) | 最初の1つを取得 |
querySelectorAll(セレクタ) | すべてを NodeList で取得 |
getElementById(id) | id で取得（# は付けない） |
要素.closest(セレクタ) | 自分または祖先で最も近い要素 |
要素.querySelector() | その要素の中だけを探す |
要素があるときだけ処理する
?. （オプショナルチェーン）を使うと、要素がないときにエラーになりません。
JS
1document.querySelector('#banner')?.remove();
注意点
- 01script を head に書くと、HTMLが読み込まれる前に実行されて要素が見つかりません。body の最後に書くか、defer を付けます。
- 02querySelectorAll() の結果は配列そのものではないため、map() などを使うときは Array.from() で配列に変換します。