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アプリのインタラクションが一気に広がります！
コメント