querySelectorとgetElementByIdの使用方法

  • はじめに JavaScriptのDOM操作について学びましょう。DOM操作では、HTML要素の選択や操作ができます。今回は、querySelectorとgetElementByIdの使用方法について見ていきましょう。
Gal Normal

DOM操作ってなに？

Geek Curious

HTML要素を選択して操作できるようにするものだよね？

Gal Happy

そうなの！JavaScriptでHTML要素を選択する方法はいくつかあるけど、今回は querySelector と getElementById について説明するね！

  • HTML要素の選択
  • querySelectorとgetElementById
Gal Pleased

querySelector は、指定したCSSセレクタに一致する最初の要素を選択するの。例えば、こんな感じ！

const titleElement = document.querySelector('#title');
Geek Happy

なるほど、 querySelector でCSSセレクタを指定して、要素を選ぶんだね！

Gal Happy

そうなの！もう一つの方法は getElementById で、指定したID属性に一致する要素を選択できるわ！例えば、こんな感じ！

const titleElement = document.getElementById('title');
Geek Happy

わかった！ getElementById でID属性を指定して、要素を選ぶんだね！

Gal Happy

そうなの！どちらの方法でも要素を選択できるけど、 querySelector はより柔軟なセレクタが使えるから、使いやすいことが多いわ！

  • おわりに JavaScriptのDOM操作では、HTML要素の選択ができます。querySelectorとgetElementByIdを使って、簡単に要素を選択できるようになりましたね！😀