DOMとは？
DOM（Document Object Model）は、HTMLやXMLドキュメントをJavaScriptで操作するための仕組みです。
HTMLは本来「マークアップされたテキスト」に過ぎませんが、ブラウザはこれを構造化してツリー状のオブジェクト（DOMツリー）に変換します。
このDOMツリー上の各要素（<div>、<p>、<button>など）は、JavaScriptから「オブジェクト」としてアクセスでき、以下のような操作が可能になります：
- 要素の取得
- テキストの変更
- クラスの追加・削除
- 要素の追加・削除
- イベントの検知（クリックなど）
つまり、「HTMLを動かすためのインターフェース」としての役割を果たしており、JavaScript学習においてDOM操作は基礎中の基礎といえます。
本記事の内容について
今回は、DOMの基本操作をしっかり理解できるように、練習問題を10問用意しました。
また、すべての問題に HTML構造と script.js に分けた解答例 をつけており、模写しながらしっかり学べます。
練習問題①：ボタンクリックでテキストを変更する
HTML：
<p id="text1">こんにちは！</p>
<button id="btn1">テキスト変更</button>
JavaScript解答
document.getElementById('btn1').addEventListener('click', () => {
document.getElementById('text1').textContent = 'こんにちはJavaScript！';
});
練習問題②：ボタンで要素を非表示にする
HTML：
<div id="box2" style="background: #eee; padding: 1rem;">このボックスを非表示</div>
<button id="btn2">非表示にする</button>
JavaScript解答
document.getElementById('btn2').addEventListener('click', () => {
document.getElementById('box2').style.display = 'none';
});
練習問題③：入力フォームの値を取得して表示する
HTML：
<input type="text" id="input3" placeholder="入力してください">
<button id="btn3">表示する</button>
<p id="output3"></p>
JavaScript解答
document.getElementById('btn3').addEventListener('click', () => {
const inputValue = document.getElementById('input3').value;
document.getElementById('output3').textContent = inputValue;
});
練習問題④：要素を新規に追加する
HTML：
<ul id="list4">
<li>既存の項目</li>
</ul>
<button id="btn4">追加する</button>
JavaScript解答
document.getElementById('btn4').addEventListener('click', () => {
const li = document.createElement('li');
li.textContent = '新しい項目';
document.getElementById('list4').appendChild(li);
});
練習問題⑤：要素を削除する
HTML：
<ul id="list5">
<li>1つ目</li>
<li>2つ目</li>
<li>3つ目</li>
</ul>
<button id="btn5">最後を削除</button>
JavaScript解答
document.getElementById('btn5').addEventListener('click', () => {
const list = document.getElementById('list5');
if (list.lastElementChild) {
list.removeChild(list.lastElementChild);
}
});
次の問題（⑥〜⑩）では「クラス操作」「画像の切り替え」「タブUI」「モーダル」「アコーディオン」など、Web制作でよく使うDOM操作を実践形式で学びます👇
練習問題⑥：クラスの付け替え（toggle）
ボタンをクリックするたびに、背景色が切り替わるように .active クラスをトグルで付け外しします。
HTML：
<div id="toggleBox" class="box">クラスをトグル</div>
<button id="btn6">トグル</button>
<style>
.box {
padding: 1rem;
background-color: lightgray;
}
.active {
background-color: lightgreen;
}
</style>
JavaScript解答
document.getElementById('btn6').addEventListener('click', () => {
document.getElementById('toggleBox').classList.toggle('active');
});
練習問題⑦：画像の切り替え
クリックするたびに、ランダムな画像に切り替わるように src 属性を変更します。
HTML：
<img id="image7" src="https://picsum.photos/200?random=1" alt="ランダム画像">
<button id="btn7">画像を変更</button>
JavaScript解答
document.getElementById('btn7').addEventListener('click', () => {
document.getElementById('image7').src = 'https://picsum.photos/200?random=' + Math.floor(Math.random() * 100);
});
練習問題⑧：タブメニューの切り替え
ボタンをクリックすると、対応するコンテンツだけが表示されるタブUIを作成します。
HTML：
<div class="tabs">
<button class="tab" data-tab="tab1">タブ1</button>
<button class="tab" data-tab="tab2">タブ2</button>
</div>
<div id="tab1" class="tab-content">タブ1の内容</div>
<div id="tab2" class="tab-content hidden">タブ2の内容</div>
<style>
.hidden {
display: none;
}
</style>
JavaScript解答
const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.tab;
contents.forEach(content => content.classList.add('hidden'));
document.getElementById(target).classList.remove('hidden');
});
});
練習問題⑨：モーダルウィンドウの開閉
モーダルを開くボタンと閉じるボタン、背景クリックでも閉じるようにします。
HTML：
<button id="openModal">モーダルを開く</button>
<div id="modal" class="modal hidden">
<div class="modal-content">
<p>これはモーダルです</p>
<button id="closeModal">閉じる</button>
</div>
</div>
<style>
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 8px;
}
.hidden {
display: none;
}
</style>
JavaScript解答
const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', () => {
modal.classList.remove('hidden');
});
document.getElementById('closeModal').addEventListener('click', () => {
modal.classList.add('hidden');
});
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.classList.add('hidden');
}
});
練習問題⑩：アコーディオンメニュー
質問をクリックすると答えが開く。もう一度クリックすると閉じるように実装します。
HTML：
<div class="accordion">
<button class="accordion-btn">質問1</button>
<div class="accordion-content hidden">答え1：JavaScriptとは？</div>
</div>
<style>
.accordion-content {
margin-top: 0.5rem;
padding: 1rem;
background: #eee;
}
.hidden {
display: none;
}
</style>
JavaScript解答
const accBtn = document.querySelector('.accordion-btn');
const accContent = document.querySelector('.accordion-content');
accBtn.addEventListener('click', () => {
accContent.classList.toggle('hidden');
});
ここまででJavaScriptのDOM操作に関する基本的な実装パターンを一通り体験できました。
次回は、非同期処理（fetch, Promise, async/await）を使った練習問題をお届けします！