「エレメント」をテーマに、基礎／中級／上級（応用）の3レベル、各5問ずつ、合計15問のオリジナル練習問題を作成し、解答と解説付きでまとめます。
ここでいう「エレメント」は HTML要素・DOM要素操作 を前提にしています。
【基礎レベル】（DOMの取得・基本操作）
問題 1
HTML内にある <p id="text">Hello</p> のテキストを JavaScript で「こんにちは」に変更せよ。
解答
document.getElementById("text").textContent = "こんにちは";
解説
getElementByIdで要素を取得textContentで中身を変更
問題 2
<div class="box"></div> を取得して、背景色を赤に変更せよ。
解答
document.querySelector(".box").style.backgroundColor = "red";
解説
querySelectorで CSS セレクタ指定style.backgroundColorで色を変更
問題 3
<ul id="list"><li>1</li><li>2</li></ul> の最初の子 <li> を取得せよ。
解答
let firstItem = document.getElementById("list").firstElementChild;
解説
firstElementChildで最初の要素ノードを取得
問題 4
<p id="text">Hello</p> にクラス highlight を追加せよ。
解答
document.getElementById("text").classList.add("highlight");
解説
classList.addで既存クラスに追加可能
問題 5
<button id="btn">Click</button> にクリックイベントを追加して、アラート「押されました」を表示せよ。
解答
document.getElementById("btn").addEventListener("click", function() {
alert("押されました");
});
解説
addEventListenerでイベントを設定- 無名関数で処理内容を記述
【中級レベル】（要素の作成・挿入・属性操作）
問題 6
新しい <li> 要素を作り、テキスト「3」を既存の <ul id="list"> に追加せよ。
解答
let li = document.createElement("li");
li.textContent = "3";
document.getElementById("list").appendChild(li);
解説
createElementで新しい要素作成textContentで中身を設定appendChildで末尾に挿入
問題 7
<input type="text" id="name"> に属性 placeholder="名前を入力" を追加せよ。
解答
document.getElementById("name").setAttribute("placeholder", "名前を入力");
解説
setAttributeで任意の属性を追加可能
問題 8
複数の <p> 要素をまとめて取得し、すべての文字色を青にせよ。
解答
let paragraphs = document.querySelectorAll("p");
paragraphs.forEach(p => p.style.color = "blue");
解説
querySelectorAllは NodeList を返すforEachで順に操作可能
問題 9
<ul id="list"><li>1</li><li>2</li></ul> の 2 番目の <li> を削除せよ。
解答
let list = document.getElementById("list");
list.removeChild(list.children[1]);
解説
childrenで子要素を配列のように取得removeChildで削除
問題 10
<div id="container"></div> の中に、新しい <p> を挿入して「こんにちは」と表示せよ。
解答
let p = document.createElement("p");
p.textContent = "こんにちは";
document.getElementById("container").appendChild(p);
解説
- 基礎の「要素作成＋追加」を理解する練習
【上級（応用）レベル】（動的操作・複雑DOM操作）
問題 11
リストの各 <li> にインデックス番号を追加せよ。
HTML: <ul id="list"><li>Apple</li><li>Banana</li></ul>
結果: 1. Apple, 2. Banana
解答
let items = document.querySelectorAll("#list li");
items.forEach((li, index) => {
li.textContent = `${index + 1}. ${li.textContent}`;
});
解説
forEachで順番にアクセス- インデックスを利用して文字列を更新
問題 12
クリックすると <p> の背景色がランダムに変わるボタンを作れ。
HTML: <p id="text">Hello</p><button id="btn">Change</button>
解答
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;
});
解説
- ランダム値を生成して
styleに代入 - イベントで動的に操作する応用
問題 13
既存の <ul> の中身をすべて消してから、新しい <li> を 3 個追加せよ。
解答
let list = document.getElementById("list");
list.innerHTML = "";
["A", "B", "C"].forEach(text => {
let li = document.createElement("li");
li.textContent = text;
list.appendChild(li);
});
解説
innerHTML = ""で一括削除- 新しい要素を作って挿入するパターン
問題 14
<ul id="list"><li data-score="85">Alice</li><li data-score="62">Bob</li></ul>
データ属性 data-score をもとに、70 以上ならクラス passed を追加せよ。
解答
let items = document.querySelectorAll("#list li");
items.forEach(li => {
let score = parseInt(li.dataset.score);
if (score >= 70) {
li.classList.add("passed");
}
});
解説
datasetでdata-*属性にアクセス- 条件でクラスを動的に追加
問題 15
<div id="container"></div> にボタンを 5 個動的生成し、クリックするとアラートで「ボタンXが押された」と表示せよ。
解答
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 を使うことで i の値を正しく保持）
- イベントを追加して動的操作
💡 まとめポイント
- 基礎: 取得・変更・イベント
- 中級: 作成・挿入・削除・属性操作
- 上級: 動的生成・条件付き操作・データ属性・クロージャ
