ウェブページは、HTML、CSS、そしてJavaScriptの3つの要素で構成されています。HTMLがページの構造を定義し、CSSが見た目を整えるのに対し、JavaScriptはページに動きとインタラクティブ性をもたらします。その中心となるのが「DOM（Document Object Model）」操作です。
この記事では、JavaScriptによるDOM操作の基本的な概念から、要素の検索、作成、削除、属性やスタイルの操作まで、ウェブページを自在に操るための知識を徹底的に解説します。
DOMとは？
DOMは、ウェブページをノード（要素、テキスト、属性など）のツリー構造として表現します。このツリー構造を通じて、JavaScriptは特定のノードにアクセスし、その内容を変更したり、新しいノードを追加したり、既存のノードを削除したりすることができます。ブラウザがHTMLを読み込むと、その内容に基づいてDOMツリーが構築され、JavaScriptはそのツリーを操作することで、ユーザーのアクションに応じてページを更新したり、動的なコンテンツを生成したりします。
要素の検索：操作対象を見つける
DOM操作の第一歩は、操作したいHTML要素を正確に特定することです。JavaScriptには、さまざまな方法で要素を検索するためのメソッドが用意されています。
まず、特定のid属性を持つ要素を一つだけ取得するにはdocument.getElementById('id名')を使用します。idはHTML内で一意であるべきなので、これは最も直接的で高速な検索方法です。
const myElement = document.getElementById('myId');次に、指定されたclass属性を持つすべての要素を取得するにはdocument.getElementsByClassName('クラス名')を使います。
これはHTMLCollection（配列のようなオブジェクト）を返します。
const elements = document.getElementsByClassName('myClass');
// elements[0] で最初の要素にアクセスまた、特定のタグ名（例えば'div'や'p'、'a'など）を持つすべての要素を取得するにはdocument.getElementsByTagName('タグ名')を使用し、これもHTMLCollectionを返します。
const paragraphs = document.getElementsByTagName('p');より汎用的な方法として、CSSセレクタに一致する最初の要素を一つだけ取得するにはdocument.querySelector('CSSセレクタ')があります。id、class、タグ名、属性など、あらゆるCSSセレクタが利用可能です。
const firstDiv = document.querySelector('div');
const specificElement = document.querySelector('#container .item:first-child');さらに、指定されたCSSセレクタに一致するすべての要素を取得するにはdocument.querySelectorAll('CSSセレクタ')を使用します。
これはNodeList（配列のようなオブジェクト）を返し、NodeListはforEachメソッドなどで反復処理が可能です。
const allItems = document.querySelectorAll('.item');
allItems.forEach(item => {
console.log(item.textContent);
});querySelectorとquerySelectorAllは、CSSセレクタの強力さを利用できるため、現代のDOM操作で最も頻繁に使用されます。
3. 要素の作成・追加：新しいコンテンツを動的に生成する
既存のページに新しいコンテンツを追加するには、要素を作成し、それをDOMツリーの適切な位置に挿入します。
新しいHTML要素を作成するにはdocument.createElement('タグ名')を使用します。この時点ではまだDOMツリーには追加されていません。
const newDiv = document.createElement('div');要素のテキストコンテンツを設定するにはelement.textContent = 'テキスト'を、HTMLコンテンツを挿入するにはelement.innerHTML = 'HTML'を使用します。innerHTMLはHTMLタグを解釈しますが、セキュリティリスク（XSS攻撃）があるため、信頼できない文字列を扱う場合はtextContentを優先すべきです。
newDiv.textContent = 'これは新しい要素です。';作成した要素をDOMツリーに追加するには、指定された親要素の最後の子要素として追加するparent.appendChild(child)があります。
const container = document.getElementById('container');
container.appendChild(newDiv);また、指定された参照要素の直前に新しい要素を挿入するにはparent.insertBefore(newElement, referenceElement)を使用します。
const firstChild = container.firstElementChild;
container.insertBefore(newDiv, firstChild);より柔軟な位置に要素を挿入できるelement.insertAdjacentElement('position', newElement)も存在します。positionには'beforebegin'（要素自身の直前）、'afterbegin'（要素の最初の子要素として）、'beforeend'（要素の最後の子要素として、appendChildと同じ）、'afterend'（要素自身の直後）のいずれかを指定できます。
const existingElement = document.getElementById('existing');
existingElement.insertAdjacentElement('afterend', newDiv);4. 要素の削除：不要なコンテンツを取り除く
DOMから要素を削除するには、その要素の親要素から削除メソッドを呼び出します。
指定された子要素を親要素から削除するにはparent.removeChild(child)を使用します。
const container = document.getElementById('container');
const elementToRemove = document.getElementById('itemToRemove');
container.removeChild(elementToRemove);よりシンプルに、要素自身から直接削除メソッドを呼び出すことができるchild.remove()もあります。これは比較的新しいメソッドです。
const elementToRemove = document.getElementById('itemToRemove');
elementToRemove.remove();5. 親子兄弟要素へのアクセス：DOMツリーを辿る
DOMツリーは階層構造になっているため、現在操作している要素から、その親、子、兄弟要素にアクセスするメソッドが多数用意されています。
要素の直接の親要素を取得するにはelement.parentNodeを使用します。
const child = document.getElementById('child');
const parent = child.parentNode;要素のすべての子要素をHTMLCollectionとして取得するにはelement.childrenを使用します。
const parent = document.getElementById('parent');
const children = parent.children;要素の最初の子要素を取得するにはelement.firstElementChildを、最後の子要素を取得するにはelement.lastElementChildを使用します。
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;要素の次の兄弟要素を取得するにはelement.nextElementSiblingを、前の兄弟要素を取得するにはelement.previousElementSiblingを使用します。例えば、
const current = document.getElementById('current');
const nextSibling = current.nextElementSibling;
const prevSibling = current.previousElementSibling;これらのプロパティを使うことで、DOMツリー内を効率的に移動し、関連する要素を操作できます。
6. 属性の操作：要素の情報を変更する
HTML要素の属性（src, href, class, id, data-*など）もJavaScriptで操作できます。
指定された属性の値を取得するにはelement.getAttribute('属性名')を使用します。
const link = document.querySelector('a');
const href = link.getAttribute('href');指定された属性の値を設定または変更するにはelement.setAttribute('属性名', '値')を使用します。
link.setAttribute('target', '_blank');要素が指定された属性を持っているかを確認するにはelement.hasAttribute('属性名')を使用し、真偽値を返します。
const hasTarget = link.hasAttribute('target');指定された属性を要素から削除するにはelement.removeAttribute('属性名')を使用します。
link.removeAttribute('target');要素のclass属性を操作するための便利なプロパティとしてelement.classListがあります。
- クラスを追加する
element.classList.add('クラス名') - クラスを削除する
element.classList.remove('クラス名') - クラスがあれば削除し、なければ追加する
element.classList.toggle('クラス名') - そしてクラスが含まれているか確認する
element.classList.contains('クラス名')
const myDiv = document.getElementById('myDiv');
myDiv.classList.add('active');
myDiv.classList.remove('hidden');
if (myDiv.classList.contains('highlight')) { /* ... */ }data-*属性（カスタムデータ属性）にアクセスするためのプロパティとしてelement.datasetがあります。data-my-value="example"のような属性はelement.dataset.myValueでアクセスできます。
HTML
<div id="dataDiv" data-user-id="123" data-role="admin"></div>JavaScript
const dataDiv = document.getElementById('dataDiv');
console.log(dataDiv.dataset.userId); // "123"
dataDiv.dataset.role = 'editor';7. スタイル関連操作：見た目を動的に変更する
JavaScriptを使って要素のCSSスタイルを直接変更することができます。
要素のインラインスタイルを直接設定するにはelement.style.propertyName = '値'を使用します。CSSのプロパティ名がハイフン区切りの場合（例: background-color）は、JavaScriptではキャメルケース（例: backgroundColor）で記述します。
const myBox = document.getElementById('myBox');
myBox.style.backgroundColor = 'blue';
myBox.style.width = '200px';
myBox.style.height = '100px';ただし、element.styleはインラインスタイルにのみ影響し、CSSファイルや<style>タグで定義されたスタイルには影響しません。
また、CSSの優先順位の観点から、インラインスタイルは非常に強い影響力を持つため、多用するとCSSの管理が複雑になる可能性があります。
スタイルを動的に変更する最も推奨される方法は、CSSでスタイルを定義したクラスを用意し、JavaScriptでそのクラスを追加・削除することです。
これにより、スタイルとJavaScriptのロジックを分離でき、CSSの管理が容易になります。
CSS
.highlight { background-color: yellow; border: 2px solid orange; }
.hidden { display: none; }JavaScript
const myElement = document.getElementById('myElement');
myElement.classList.add('highlight'); // ハイライトスタイルを適用
myElement.classList.remove('hidden'); // 非表示を解除
myElement.classList.toggle('active'); // activeクラスをトグル要素に適用されている最終的な計算済みスタイル（CSSファイル、インラインスタイル、ブラウザのデフォルトスタイルなど、すべてを考慮した結果）を取得するにはwindow.getComputedStyle(element)を使用します。これは読み取り専用です。
const myBox = document.getElementById('myBox');
const computedStyle = window.getComputedStyle(myBox);
console.log(computedStyle.width);
console.log(computedStyle.display);まとめ
JavaScriptによるDOM操作は、現代のインタラクティブなウェブサイト開発において不可欠なスキルです。要素の検索から始まり、作成、追加、削除、そして属性やスタイルの操作まで、これらの基本的なメソッドを習得することで、ユーザーの行動に反応する動的なウェブページを構築できるようになります。
特に、querySelector/querySelectorAllによる要素検索、createElementとappendChildによる要素の追加、そしてclassListを使ったクラスの操作は、頻繁に利用される強力なツールです。
これらの知識を基盤として、イベントリスナーと組み合わせることで、より複雑でリッチなユーザー体験を提供することが可能になります。
