DOM インスタンス - JavaScript を使用した HTML ドキュメント操作の学習

**説明:** この記事では、JavaScript を使用して HTML ドキュメントを操作するさまざまな一般的なタスクを網羅した、豊富な DOM インスタンスを提供します。要素へのアクセス、コンテンツの変更、スタイルの操作、イベントの処理など。これらのインスタンスを学習することで、JavaScript を使用して Web ページ要素をより巧みに操作し、動的なインタラクティブ効果を実現できるようになります。

1. HTML 要素へのアクセス

• **ID による要素の取得:** `getElementById()` メソッドを使用して、要素の id 属性に基づいて単一の要素を取得します。

  
  <div id="myElement"></div>
  
  <script>
    const element = document.getElementById('myElement');
  </script>
        

• **タグ名による要素の取得:** `getElementsByTagName()` メソッドを使用して、同じタグ名を持つ要素のコレクションを取得します。

  
  <p>段落 1</p>
  <p>段落 2</p>
  
  <script>
    const paragraphs = document.getElementsByTagName('p');
  </script>
        

• **クラス名による要素の取得:** `getElementsByClassName()` メソッドを使用して、同じクラス名を持つ要素のコレクションを取得します。

  
  <div class="myClass"></div>
  <span class="myClass"></span>
  
  <script>
    const elements = document.getElementsByClassName('myClass');
  </script>
        

2. HTML 要素のコンテンツの変更

• **要素のテキストコンテンツの変更:** `innerHTML` プロパティを使用して要素の HTML コンテンツを変更するか、`textContent` プロパティを使用してプレーンテキストコンテンツを変更します。

  
  <p id="myParagraph">元のテキスト</p>
  
  <script>
    const paragraph = document.getElementById('myParagraph');
    paragraph.innerHTML = '新しいテキスト'; // HTML を含む
    paragraph.textContent = '新しいテキスト'; // プレーンテキストのみ
  </script>
        

• **要素の属性の変更:** `getAttribute()` を使用して属性値を取得し、`setAttribute()` を使用して属性値を設定します。

  
  <a href="#" id="myLink">リンク</a>
  
  <script>
    const link = document.getElementById('myLink');
    const href = link.getAttribute('href');
    link.setAttribute('href', 'https://www.example.com');
  </script>
        

3. HTML 要素のスタイルの操作

• **インラインスタイルの変更:** 要素の `style` プロパティを直接操作して、スタイル属性値を変更します。

  
  <p id="myParagraph">段落</p>
  
  <script>
    const paragraph = document.getElementById('myParagraph');
    paragraph.style.color = 'red';
    paragraph.style.fontSize = '20px';
  </script>
        

• **CSS クラスの追加/削除:** `classList` プロパティの `add()`、`remove()`、`toggle()` メソッドを使用して、CSS クラスを追加、削除、または切り替えます。

  
  <div id="myElement" class="initial-class">要素</div>
  
  <script>
    const element = document.getElementById('myElement');
    element.classList.add('new-class');
    element.classList.remove('initial-class');
    element.classList.toggle('another-class');
  </script>
        

4. HTML 要素の作成と挿入

• **要素の作成:** `createElement()` メソッドを使用して、新しい HTML 要素を作成します。

  
  <script>
    const newParagraph = document.createElement('p');
    newParagraph.textContent = '新しい段落';
  </script>
        

• **要素の挿入:** `appendChild()` メソッドを使用して、要素を親要素の最後に追加するか、`insertBefore()` メソッドを使用して、要素を特定の位置に挿入します。

  
  <div id="parentElement"></div>
  
  <script>
    const newElement = document.createElement('span');
    const parentElement = document.getElementById('parentElement');
  
    parentElement.appendChild(newElement); // 最後に追加
  
    const existingElement = parentElement.firstChild;
    parentElement.insertBefore(newElement, existingElement); // 特定の位置に挿入
  </script>
        

5. HTML 要素の削除

• `removeChild()` メソッドを使用して、親要素から指定された子要素を削除します。

  
  <div id="parentElement">
    <p id="childElement">削除される段落</p>
  </div>
  
  <script>
    const parentElement = document.getElementById('parentElement');
    const childElement = document.getElementById('childElement');
    parentElement.removeChild(childElement);
  </script>
        

6. HTML イベントの処理

• **イベントリスナーのバインド:** `addEventListener()` メソッドを使用して、クリックイベント、マウスムーブイベントなど、要素にイベントリスナーをバインドします。

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

• **イベントオブジェクト:** イベントが発生すると、ブラウザはマウスの位置、キーボードのキーなど、イベントに関連する情報を含むイベントオブジェクトを渡します。

  
  <div id="myDiv"></div>
  
  <script>
    const div = document.getElementById('myDiv');
    div.addEventListener('mousemove', function(event) {
      console.log('マウスの位置: x = ' + event.clientX + ', y = ' + event.clientY);
    });
  </script>
        

これらの DOM インスタンスを学習して実践することで、JavaScript を使用して HTML ドキュメントを操作するテクニックをより深く理解し、習得することができます。より動的でインタラクティブな Web ページを構築するための強固な基盤を築くことができます。

DOM インスタンスに関する Q&A