この記事ではJavaScriptを使ったDOM操作について解説します。DOM（Document Object Model）とは、HTMLのような文書の構造を表現するためのプログラミングインターフェースです。JavaScriptとの連携により、ウェブページの内容やスタイルの変更ができるようになります。
1. DOMとは？
ウェブページの内容はHTMLによって記述されています。しかし、このHTMLの内容をJavaScriptから操作するためには何らかの橋渡しが必要です。その役割を果たすのがDOMです。DOMによって、HTMLの各要素をオブジェクトとして扱うことができるようになり、JavaScriptからそのオブジェクトへアクセスして操作できるようになります。この記事ではDOM操作の基本的なものを例を挙げて紹介していきます。
2. DOM要素の取得方法
まず最初に、HTML要素の取得方法を見ていきましょう。
const elementById = document.getElementById('myId'); // IDによる取得
const elementsByClass = document.getElementsByClassName('myClass'); // クラスによる取得
const elementsByTag = document.getElementsByTagName('div'); // タグによる取得
const elementBySelector = document.querySelector('#myId .myClass'); // CSSセレクタによる取得
const elementsBySelector = document.querySelectorAll('div.myClass'); // CSSセレクタによる取得（複数）
3. DOM要素の作成と追加
次は、新しいHTML要素の作成とそれをDOMに追加する方法です。
const newElement = document.createElement('div'); // 新しいdiv要素を作成
newElement.textContent = '新規に作成した要素です。'; // 要素のテキストコンテンツを設定
このようにして作成した要素は、まだページ上には表示されません。要素をページ上に表示するためには、既存のDOM要素（この場合は'parent'要素）の子要素として追加する必要があります。
const parentElement = document.getElementById('parent'); // 親要素を取得
parentElement.appendChild(newElement); // 新しい要素を親要素の子要素として追加
4. DOM要素の削除と置換
最後に、DOMから要素を削除する方法と、要素を別の要素に置き換える方法について見てみましょう。
const elementToRemove = document.getElementById('remove-me'); // 削除する要素を取得
elementToRemove.parentNode.removeChild(elementToRemove); // 要素を削除
const elementToReplace = document.getElementById('replace-me'); // 置換する要素を取得
const replacementElement = document.createElement('div'); // 新しいdiv要素を作成
replacementElement.textContent = '置換された新しい要素です。'; // 要素のテキストコンテンツを設定
elementToReplace.parentNode.replaceChild(replacementElement, elementToReplace); // 要素を置換
5. イベントリスナーの使用
JavaScriptとDOM操作を組み合わせることで、ユーザーのアクション（クリック、スクロール、キー入力など）に反応する動的なページを作成することができます。これは「イベントリスナー」を使うことでできます。下のコードは、ボタンクリックに反応する基本的なイベントリスナーの設定例です。
const button = document.getElementById('myButton'); // ボタン要素を取得
button.addEventListener('click', function() {
alert('ボタンがクリックされました！');
}); // ボタンのクリックイベントに反応
このコードでは、ボタンがクリックされるとブラウザ上にアラートが表示されます。
以上、JavaScriptとDOM操作の基本でした。