💡 記事の下にエディタを用意しています。壊しても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')