2026年4月16日
JavaScriptでHTMLを動かすには？
「JavaScript DOM 初心者」として学ぶ最初の壁が、「JavaScriptからHTMLをどう操作するか」です。
DOM（ドム）とは Document Object Model の略で、「HTMLの各要素をJavaScriptから操作するための仕組み」です。DOMを使うと、ボタンをクリックしたときに文字を変えたり、要素を追加・削除したりできます。
この記事では、DOMの基本的な使い方をコード例とともにわかりやすく解説します。
DOMとは？HTMLとJavaScriptをつなぐ橋
ブラウザはHTMLを読み込むとき、各タグを「オブジェクト（もの）」として管理します。この管理の仕組みがDOMです。
たとえば、次のHTMLがあるとします。
<h1 id="title">こんにちは！</h1>
<p id="message">ここにメッセージが入ります。</p>JavaScriptからDOMを使うと、この h1 や p の中身を自由に書き換えられます。
💡 JavaScript問題ドリルで基礎を確認できます。
要素を取得する方法
DOMを操作するには、まず「どの要素を操作するか」を指定する必要があります。よく使う2つの方法を紹介します。
① getElementById（アイディーで取得）
id 属性を使って要素を1つ取得します。
const title = document.getElementById('title');
console.log(title); // h1要素が取得できる② querySelector（セレクタで取得）
CSSセレクタと同じ書き方で要素を取得します。より柔軟に使えます。
const title = document.querySelector('#title'); // idで取得
const para = document.querySelector('.message'); // classで取得
const h1 = document.querySelector('h1'); // タグ名で取得💡 使い分けの目安：
getElementById：id が決まっているときにシンプルに書けるquerySelector：クラス名やタグ名でも取得できて汎用的
🔗 あわせてif文入門もチェックしてみましょう。
要素の内容を変える
要素を取得したら、中身を書き換えられます。
textContent：テキストを変える
const title = document.getElementById('title');
title.textContent = '書き換えました！'; // h1の文字が変わるinnerHTML：HTMLごと変える
const msg = document.getElementById('message');
msg.innerHTML = '<strong>太字のメッセージ</strong>です。';style：CSSを変える
const title = document.getElementById('title');
title.style.color = 'red';
title.style.fontSize = '40px';ハンズオン：ボタンで文字を書き換えよう
実際に手を動かしてみましょう。ボタンをクリックするたびに見出しの文字が変わるページを作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOM練習</title>
</head>
<body>
<h1 id="title">最初のタイトル</h1>
<button id="btn">タイトルを変える</button>
<script>
const btn = document.getElementById('btn');
const title = document.getElementById('title');
btn.addEventListener('click', function() {
title.textContent = 'ボタンで変わりました！';
title.style.color = '#0d9488';
});
</script>
</body>
</html>ボタンをクリックすると、見出しの文字と色が変わります。これがDOMの基本的な使い方です。
📖 詳しくは変数入門で解説しています。
クラスの追加・削除
CSSのクラスをJavaScriptから追加・削除することもできます。これを使うと、ボタンを押したときにデザインを切り替えるなどの表現ができます。
const box = document.getElementById('box');
box.classList.add('active'); // クラスを追加
box.classList.remove('active'); // クラスを削除
box.classList.toggle('active'); // あれば削除、なければ追加DOM操作でよくあるミスと対策
DOM操作を始めたばかりのとき、よくあるミスを紹介します。
ミス1：要素が見つからない（nullになる）
querySelectorで要素を取得しようとしたのに、nullが返ってくることがあります。原因はセレクタのスペルミスか、スクリプトがHTMLより先に実行されていることです。scriptタグをbodyの閉じタグの直前に置くか、DOMContentLoadedイベントを使いましょう。
ミス2：innerHTMLとtextContentの使い分け
innerHTMLはHTMLタグを含む内容を書き換えます。textContentはテキストだけを書き換えます。ユーザーが入力した値を表示するときは、textContentを使いましょう。innerHTMLだと悪意のあるコードが実行される危険があります。
ミス3：イベントリスナーが二重に登録される
同じボタンにaddEventListenerを何度も実行すると、クリックのたびに処理が複数回動いてしまいます。リスナーの登録は一度だけにしましょう。
まとめ
- ✅ DOM はHTMLの要素をJavaScriptから操作する仕組み
- ✅
getElementByIdやquerySelectorで要素を取得する - ✅
textContentでテキスト、styleでCSSを変更できる - ✅
classList.toggleでクラスの追加・削除を切り替えられる - ✅ DOMはJavaScriptでインタラクティブなページを作る基本技術
JavaScriptの基礎はJavaScript入門で復習できます。querySelectorで使うセレクタはCSSセレクターの使い方を参照してください。
あわせて読みたい記事
- JavaScriptとは？初心者向け解説 — JS基礎に戻る
- JavaScriptイベント入門 — DOM操作とイベントの組み合わせ
- JavaScript変数入門 — 取得した要素を変数に格納
- JavaScript配列入門 — 複数要素のループ処理
- JavaScript関数入門 — DOM操作を関数にまとめる
- CSSセレクターの使い方 — querySelectorで使うセレクタ