【初心者向け】JavaScriptでDOMを操作する方法とイベントの使い方をやさしく解説！

JavaScriptを使ってHTMLの内容を動的に変更したり、クリックや入力などのユーザー操作に反応したいなら「DOM操作」と「イベント処理」は必須です。この記事では、DOMの基本的な操作方法と、よく使うイベントの書き方を、初心者向けに図やコード例を交えてわかりやすく解説します。

✅ DOM（Document Object Model）とは？

DOMとは、HTML文書をJavaScriptで操作できるようにした「構造化されたデータ」のことです。Webページのテキストやボタン、画像などをJavaScriptで書き換えるには、まずDOMを通して要素にアクセスする必要があります。

🔹 要素の取得方法

// IDで取得
const title = document.getElementById('main-title');

// クラスで取得（NodeListが返る）
const items = document.getElementsByClassName('item');

// CSSセレクタで取得（1つだけ）
const btn = document.querySelector('.btn');

🔹 要素の内容・スタイルを変更

title.textContent = 'タイトルを変更しました';
btn.style.color = 'red';

🎯 イベントとは？

イベントとは、「クリック」「マウスを乗せた」「キーを押した」など、ユーザーの操作に対して反応するJavaScriptの機能です。

🔹 イベントの基本的な書き方

const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
  alert('ボタンがクリックされました！');
});

🧾 よく使うイベント一覧

イベント	動作
click	クリックされたとき
mouseover	マウスが上に乗ったとき
keydown	キーボードのキーを押したとき
submit	フォームが送信されたとき

👶 初心者がやりがちなエラー

• getElementById() の引数に # をつけてしまう → #main ❌ → main ✅
• 要素がHTMLにまだ存在しないタイミングでイベントをつけてしまう
• querySelectorAll()はNodeList（配列っぽい）なので .forEach()はOKでも map()は使えない

📋 サンプル：HTML + JS で試せるコード

<h1 id="main-title">こんにちは！</h1>
<button class="btn">ここをクリック</button>

<script>
  const btn = document.querySelector('.btn');
  btn.addEventListener('click', () => {
    document.getElementById('main-title').textContent = 'クリックされました！';
  });
</script>

💡 まとめ

• DOMはJavaScriptからHTMLを操作するためのインターフェース
• イベントはユーザー操作に反応するための仕組み
• addEventListenerを使って柔軟に反応を設計できる

この2つを使いこなせるようになると、Webアプリのインタラクションが一気に広がります！