「コードを書いたのに何も起きない」を解消する

DOM操作の学習で一番つまずくのは「コードは書けたけど、本当に動いてるか分からない」こと。 document.querySelector で要素を取得しても、変数の中身は目に見えない。

このサンドボックスでは、コードを実行した瞬間にプレビューのHTMLが変わる。「テキストが変わった」「色が変わった」「要素が追加された」が目で確認できるから、DOM操作の効果を実感しながら学べる。

まず試してほしい操作

テキストを変える — element.textContent = '新しいテキスト' でプレビューの文字が即座に変わる。
スタイルを変える — element.style.color = 'red' で文字色が変わる。CSSを書かなくてもJSから見た目を操作できることが分かる。
要素を追加する — createElement + appendChild で新しい要素がプレビューに出現する。
クラスを切り替える — classList.toggle('active') でクラスの付け外し。CSSと組み合わせた動的UIの基本。

課題や制作でどう使う？

ToDoアプリの練習 — 「追加ボタンを押したらリストに項目が増える」仕組みを、このサンドボックスで小さく試してから本番コードに移植する。
クイズアプリの正誤判定 — ボタンクリックで「正解！」「不正解…」のテキストを表示する処理を試す。
ダークモード切替 — body に classList.toggle('dark') するだけでテーマが切り替わる仕組みを体験。

よくある質問

Q. innerHTML と textContent の違いは？: textContent はプレーンテキストとして挿入。innerHTML はHTMLとして解釈される。セキュリティ上、ユーザー入力を innerHTML に入れるのは危険（XSS）。基本は textContent を使おう。
Q. querySelector と getElementById の違いは？: querySelector はCSSセレクタで何でも指定できる（クラス、属性、子孫など）。getElementById はIDだけ。querySelector の方が汎用的で、今はこちらが主流。

もっと学ぼう

DOM操作の基本パターン

// 要素を取得する
const el = document.getElementById('my-id');
const els = document.querySelectorAll('.my-class');

// テキストを変更する
el.textContent = '新しいテキスト';

// HTMLを挿入する
el.innerHTML = '太字';

// クラスを操作する
el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('dark');

// スタイルを変更する
el.style.backgroundColor = '#0d9488';
el.style.display = 'none';

// 要素を作成して追加する
const newEl = document.createElement('div');
newEl.textContent = '新しい要素';
document.body.appendChild(newEl);

// イベントを登録する
el.addEventListener('click', () => {
  alert('クリックされた！');
});

上のサンドボックスでこれらのコードを試してみましょう。リアルタイムで結果が確認できます。

DOM サンドボックス

使い方