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