DOMとは何か

DOM（Document Object Model）は、ウェブページの構造をプログラムから操作するためのインターフェースです。ブラウザはHTMLドキュメントを読み込み、各要素をツリー状に構造化します。このツリー構造を「DOMツリー」と呼び、JavaScriptを使ってこのDOMツリーにアクセスし、ページの内容や構造を変更することができます。例えば、ボタンをクリックしたときにテキストを変更したり、新しい要素を追加することが可能です。

・要素の取得と操作 (getElementById, querySelector)

DOMツリー内の要素を取得して操作するためには、JavaScriptでいくつかのメソッドを使用します。

• getElementById() このメソッドは指定したIDを持つ要素を取得します。

  <div id="content">こんにちは！</div>
  <script>
    let element = document.getElementById('content');
    console.log(element.textContent); // 出力: こんにちは！
  </script>

• querySelector() このメソッドは指定したCSSセレクタに一致する最初の要素を取得します。柔軟に要素を選択するためによく使われます。

  <div class="box">ボックス1</div>
  <div class="box">ボックス2</div>
  <script>
    let element = document.querySelector('.box');
    console.log(element.textContent); // 出力: ボックス1
  </script>

  querySelectorAll() を使うと、指定したセレクタに一致するすべての要素を取得することもできます。

  let elements = document.querySelectorAll('.box');
  elements.forEach((el) => console.log(el.textContent));
  // 出力:
  // ボックス1
  // ボックス2

• 要素の操作 取得した要素のプロパティを変更することで、ページの内容を動的に変えることができます。

  element.textContent = 'こんにちは、JavaScript！'; // テキストの変更
  element.style.color = 'red'; // テキストの色を変更

・イベントリスナー (click, mouseover など)

イベントリスナーを使うことで、ユーザーの操作（クリック、マウスオーバーなど）に応じて特定の処理を実行することができます。

• イベントリスナーの追加 JavaScriptでは、addEventListener() メソッドを使って要素にイベントリスナーを追加します。

  <button id="myButton">クリックしてね</button>
  <script>
    let button = document.getElementById('myButton');
    button.addEventListener('click', () => {
      alert('ボタンがクリックされました！');
    });
  </script>

  上記の例では、ボタンがクリックされたときにアラートが表示されるように設定しています。

• 他のイベントの例

  • mouseover: マウスが要素の上に乗ったときに発生します。

    button.addEventListener('mouseover', () => {
      button.style.backgroundColor = 'yellow';
    });

  • mouseout: マウスが要素から離れたときに発生します。

    button.addEventListener('mouseout', () => {
      button.style.backgroundColor = '';
    });

• イベントの削除 イベントリスナーを削除するには、removeEventListener() メソッドを使います。イベントリスナーの削除には、追加時と同じ関数を渡す必要があります。

  function handleClick() {
    alert('ボタンがクリックされました！');
  }
  button.addEventListener('click', handleClick);
  button.removeEventListener('click', handleClick);

DOM操作のまとめ

DOM操作を使うことで、ウェブページに対して動的でインタラクティブな要素を追加できます。ユーザーの操作に応じた反応を実装することで、より魅力的なユーザーエクスペリエンスを提供することが可能です。まずは基本的な要素の取得やイベントリスナーの設定から始めて、徐々に複雑な操作に挑戦してみてください。