ツール一覧

💡 記事の下にエディタを用意しています。壊してもOK!

更新日: 2025年3月1日

JavaScriptのquerySelectorの使い方|CSSセレクタ

📌

結論

querySelector でCSSセレクタで要素を取得できます

📝 実際のコードはこちら
const el = document.querySelector('.card');
getElementById はIDだけですが、querySelector はクラス、タグ、属性など何でも指定できます。

まとめ

querySelector はCSSセレクタで取得(最初の1つ) ・querySelectorAll は全件取得

演習で試してみよう

querySelectorで要素を取得してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫!

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

idがlistのul内の最初のliを取得し、そのtextContentをconsole.logで出力してください。

詰まったらヒント

document.querySelector('#list li')

15pt

querySelector

idがlistのul内の最初のliを取得し、そのtextContentをconsole.logで出力してください。

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説