完全無料のJavaScript学習講座 8日目：DOM要素の選択

前回の授業でDOMとそのツリー構造について学びましたね。

今回は、DOMの要素を選択する方法を学んでいきます。

DOMの要素を選択する方法マスターすることで、ウェブページの要素にアクセスし、JavaScriptで効果的に操作できるようになります。

簡単に言えば、今回の授業はJavaScriptで操作したいところを選べるようになろう！ってことですね。

DOMの要素を選択する

JavaScriptでDOM要素を選択するということは、ウェブページ内の特定のHTML要素にアクセスして、それを操作するための準備を意味します。

準備することで、ウェブページの構成要素を変更したり、新しい要素を追加したり、イベントに応じてスタイルを変更するなど、ページをより動的にすることが可能になります。

まずは、「getElementById」についてです。

この方法は、HTML要素の「id」という属性を使って、特定の要素を選択する方法です。

例えば、次のようなHTMLがあるとします。

<div id="message">こんにちは！</div>

この要素を選択するには、JavaScriptで以下のように書きます。

const messageElement = document.getElementById('message');

これで、messageElementに「こんにちは！」と書かれたdiv要素が選択されます。

次に、「querySelector」についてです。

この方法は、CSSセレクタを使って要素を選択する方法です。

例えば、次のようなHTMLがあるとします。

<p class="text">これはサンプルの文章です。</p>

この要素を選択するには、JavaScriptで以下のように書きます。

const textElement = document.querySelector('.text');

これで、textElementに「これはサンプルの文章です。」と書かれたp要素が選択されます。

最後に、「querySelectorAll」についてです。

この方法もCSSセレクタを使って要素を選択しますが、querySelectorAllは、一致するすべての要素を選択します。

例えば、次のようなHTMLがあるとします。

<ul>
  <li class="item">アイテム1</li>
  <li class="item">アイテム2</li>
  <li class="item">アイテム3</li>
</ul>

この要素を選択するには、JavaScriptで以下のように書きます。

const itemElements = document.querySelectorAll('.item');

これで、itemElementsに「アイテム1」「アイテム2」「アイテム3」と書かれたli要素がすべて選択されます。

選択した要素を格納する変数の宣言に「const」が使われているのは、再代入されないことを明示できるため、より安全にコードを書くことができるからです。もちろん、letを使っても問題ありません。

今日は、DOM要素を選択する3つの方法を学びました。

これにより、ウェブページの要素にアクセスし、JavaScriptで効果的に操作できるようになります。

選択した要素は、JavaScriptで操作するための変数に代入します。

通常、constを使って定数として宣言しますが、要素を変更する予定がある場合はletを使うこともできます。

次のステップでは、選択した要素を実際に操作する方法を学び、ウェブページをより動的に作成できるようになります。

練習を続けて、JavaScriptでのDOM操作をマスターしましょう。

よかったらシェアしてね！