MENU

【初心者向け】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アプリのインタラクションが一気に広がります!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

初心者の私がコーディングをしていて躓いたところをピックアップして日々の備忘録として発信しています^^
楽しくコーディングを身に着けていけるように日々勉強中です★

コメント

コメントする

目次