JavaScript | レベル別練習問題：エレメント（HTML要素・DOM要素操作）

JavaScript

2025.10.31

では「エレメント操作」の 基礎〜中級問題（問題1〜10） についても、ステップ実行表（変数・DOM状態を逐次追跡）付き解説 を作ります。

基礎レベル問題（1〜5）ステップ実行

問題1

<p id="text">Hello</p>

<p id="text">Hello</p>

HTML

document.getElementById("text").textContent = "こんにちは";

document.getElementById("text").textContent = "こんにちは";

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	#text	“Hello”	“こんにちは”	`textContent` を更新

問題2

<div class="box"></div>

<div class="box"></div>

HTML

document.querySelector(".box").style.backgroundColor = "red";

document.querySelector(".box").style.backgroundColor = "red";

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	.box	背景色なし	背景色:red	`style.backgroundColor` を更新

問題3

<ul id="list"><li>1</li><li>2</li></ul>

<ul id="list"><li>1</li><li>2</li></ul>

HTML

let firstItem = document.getElementById("list").firstElementChild;

let firstItem = document.getElementById("list").firstElementChild;

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	#list	1, 2	firstItem 参照 -> 1	最初の子を取得

問題4

document.getElementById("text").classList.add("highlight");

document.getElementById("text").classList.add("highlight");

JavaScript

ステップ	操作対象	前のクラス	後のクラス	実行内容
1	#text	“”	“highlight”	クラスを追加

問題5

document.getElementById("btn").addEventListener("click", function() {
    alert("押されました");
});

document.getElementById("btn").addEventListener("click", function() {
    alert("押されました");
});

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	#btn	イベントなし	クリックで alert 表示	イベント登録

中級レベル問題（6〜10）ステップ実行

問題6

let li = document.createElement("li");
li.textContent = "3";
document.getElementById("list").appendChild(li);

let li = document.createElement("li");
li.textContent = "3";
document.getElementById("list").appendChild(li);

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	新規 li	なし	“3”	要素作成＆テキスト設定
2	#list	1,2	1,2,3	追加

問題7

document.getElementById("name").setAttribute("placeholder", "名前を入力");

document.getElementById("name").setAttribute("placeholder", "名前を入力");

JavaScript

ステップ	操作対象	前の属性	後の属性	実行内容
1	#name	placeholder なし	placeholder=”名前を入力”	属性追加

問題8

let paragraphs = document.querySelectorAll("p");
paragraphs.forEach(p => p.style.color = "blue");

let paragraphs = document.querySelectorAll("p");
paragraphs.forEach(p => p.style.color = "blue");

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	p[0]	色なし	blue	スタイル更新
2	p[1]	色なし	blue	スタイル更新
…	…	…	…	…

問題9

let list = document.getElementById("list");
list.removeChild(list.children[1]);

let list = document.getElementById("list");
list.removeChild(list.children[1]);

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	#list	1,2,3	1,3	2番目 li を削除

問題10

let p = document.createElement("p");
p.textContent = "こんにちは";
document.getElementById("container").appendChild(p);

let p = document.createElement("p");
p.textContent = "こんにちは";
document.getElementById("container").appendChild(p);

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	新規 p	なし	“こんにちは”	要素作成＆テキスト設定
2	#container	空	こんにちは	追加

解説ポイントまとめ

基礎
- 取得・変更・イベント登録が中心
- 逐次表で操作前後を確認すると理解が早い
中級
- 新規要素作成・属性操作・削除
- 配列・NodeList に対する繰り返し操作も把握可能
ステップ表のメリット
- DOM操作の順序や影響範囲が視覚化される
- 初心者のデバッグ理解に最適

上級レベル問題（11〜15）ステップ実行

問題11：リストの各 <li> にインデックス番号を追加

let items = document.querySelectorAll("#list li");
items.forEach((li, index) => {
    li.textContent = `${index + 1}. ${li.textContent}`;
});

let items = document.querySelectorAll("#list li");
items.forEach((li, index) => {
    li.textContent = `${index + 1}. ${li.textContent}`;
});

JavaScript

index	li.textContent (前)	li.textContent (後)	実行内容
0	Apple	1. Apple	インデックスを付加
1	Banana	2. Banana	インデックスを付加

問題12：クリックすると <p> 背景色がランダムに変わるボタン

document.getElementById("btn").addEventListener("click", () => {
    let colors = ["red", "green", "blue", "yellow"];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.getElementById("text").style.backgroundColor = randomColor;
});

document.getElementById("btn").addEventListener("click", () => {
    let colors = ["red", "green", "blue", "yellow"];
    let randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.getElementById("text").style.backgroundColor = randomColor;
});

JavaScript

ステップ	操作対象	前の状態	後の状態	実行内容
1	#btn	クリックイベントなし	クリックで関数実行	イベント登録
2	#text	背景色なし/前の色	ランダム色	クリック時に背景色変更

問題13：既存 <ul> の中身をすべて削除して新しい <li> を追加

let list = document.getElementById("list");
list.innerHTML = "";
["A", "B", "C"].forEach(text => {
    let li = document.createElement("li");
    li.textContent = text;
    list.appendChild(li);
});

let list = document.getElementById("list");
list.innerHTML = "";
["A", "B", "C"].forEach(text => {
    let li = document.createElement("li");
    li.textContent = text;
    list.appendChild(li);
});

JavaScript

text	list.innerHTML (前→後)	実行内容
A	1,2 → A	既存削除、追加
B	A → AB	新規追加
C	AB → ABC	新規追加

問題14：data-score 属性をもとに条件付きクラス追加

let items = document.querySelectorAll("#list li");
items.forEach(li => {
    let score = parseInt(li.dataset.score);
    if (score >= 70) {
        li.classList.add("passed");
    }
});

let items = document.querySelectorAll("#list li");
items.forEach(li => {
    let score = parseInt(li.dataset.score);
    if (score >= 70) {
        li.classList.add("passed");
    }
});

JavaScript

li.textContent	data-score	条件 score>=70	classList (前→後)	実行内容
Alice	85	true	“” → “passed”	クラス追加
Bob	62	false	“” → “”	クラスなし

問題15：5個のボタンを動的生成＋クリックイベント

let container = document.getElementById("container");
for (let i = 1; i <= 5; i++) {
    let btn = document.createElement("button");
    btn.textContent = `ボタン${i}`;
    btn.addEventListener("click", () => {
        alert(`ボタン${i}が押された`);
    });
    container.appendChild(btn);
}

let container = document.getElementById("container");
for (let i = 1; i <= 5; i++) {
    let btn = document.createElement("button");
    btn.textContent = `ボタン${i}`;
    btn.addEventListener("click", () => {
        alert(`ボタン${i}が押された`);
    });
    container.appendChild(btn);
}

JavaScript

i	btn.textContent	container.innerHTML (前→後)	イベント登録	実行内容
1	ボタン1	“” → “ボタン1”	クリック → alert(“ボタン1が押された”)	ボタン1生成、追加、イベント設定
2	ボタン2	“ボタン1” → “ボタン1ボタン2”	クリック → alert(“ボタン2が押された”)	ボタン2生成、追加、イベント設定
3	ボタン3	… → “ボタン3”	クリック → alert(“ボタン3が押された”)	ボタン3生成、追加、イベント設定
4	ボタン4	… → “ボタン4”	クリック → alert(“ボタン4が押された”)	ボタン4生成、追加、イベント設定
5	ボタン5	… → “ボタン5”	クリック → alert(“ボタン5が押された”)	ボタン5生成、追加、イベント設定