Day14：DOM操作① 練習問題セット
document.getElementById と textContent は、DOM 操作の“入口”であり、Webアプリを作るための最初の大きな壁です。
ここでは、初心者でも確実に理解できるように、実践的な練習問題と丁寧な解説をまとめます。
基本問題：要素を取得して文字を読む
問題1：id=”title” の要素を取得し、その textContent を表示してください
次の HTML があるとします。
<h1 id="title">JavaScript入門</h1>
JavaScript でこの文字を console に表示してください。
解答と解説
const titleElement = document.getElementById("title");
console.log(titleElement.textContent);
document.getElementById は「id で要素を1つだけ取得する」ための関数です。
取得した要素の textContent を読むことで、要素の中の文字を取り出せます。
基本問題：文字を書き換える
問題2：id=”message” の文字を「変更されました」に書き換えてください
次の HTML があるとします。
<p id="message">元のメッセージ</p>
JavaScript でこの文字を変更してください。
解答と解説
const messageElement = document.getElementById("message");
messageElement.textContent = "変更されました";
textContent に代入すると、要素の中の文字が即座に書き換わります。
innerHTML と違い、textContent は「文字として扱う」ため安全性が高いのが特徴です。
応用問題：ボタンを押したら文字を変える
問題3：ボタンを押したら id=”result” の文字を「クリックされました」に変えてください
次の HTML があるとします。
<p id="result">まだクリックされていません</p>
<button id="btn">押す</button>
ボタンが押されたときに文字を変更するコードを書いてください。
解答と解説
const resultElement = document.getElementById("result");
const btnElement = document.getElementById("btn");
btnElement.addEventListener("click", () => {
resultElement.textContent = "クリックされました";
});
addEventListener(“click”, …) は「クリックされたら実行する処理」を登録する仕組みです。
DOM操作は「イベント → 処理 → 画面更新」という流れで動きます。
応用問題：入力欄の値を画面に反映する
問題4：入力欄に書いた名前を、id=”output” に表示してください
次の HTML があるとします。
<input id="nameInput" type="text">
<button id="showButton">表示</button>
<p id="output">ここに名前が表示されます</p>
ボタンを押したら、入力欄の値を output に表示してください。
解答と解説
const nameInputElement = document.getElementById("nameInput");
const showButtonElement = document.getElementById("showButton");
const outputElement = document.getElementById("output");
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
outputElement.textContent = name;
});
input 要素の値は textContent ではなく value で取得します。
取得した値を textContent に代入することで、画面に安全に表示できます。
実務寄り問題：空文字チェックを追加する
問題5：名前が空のときは「名前を入力してください」と表示してください
問題4 のコードに以下の仕様を追加してください。
・入力欄が空のときはエラーメッセージを表示する
・空でなければ名前を表示する
解答と解説
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
if (name === "") {
outputElement.textContent = "名前を入力してください";
return;
}
outputElement.textContent = name;
});
空文字チェックは「入力バリデーション」の基本です。
セキュリティ的にも、想定外の値をそのまま処理しないことが重要です。
セキュリティ視点の問題：textContent を使う理由
問題6：ユーザー入力を innerHTML ではなく textContent で表示すべき理由を説明してください
（コードではなく説明問題）
解答と解説
innerHTML は文字列を「HTMLとして解釈」します。
そのため、ユーザーが <script>...</script> のような文字列を入力すると、
悪意あるスクリプトが実行される危険があります（XSS攻撃）。
一方、textContent は文字列を「ただのテキスト」として扱うため、
タグやスクリプトが実行されません。
ユーザー入力や外部データを画面に出すときは、
安全性のため textContent を使うのが基本です。
Day14 DOM操作① 練習問題まとめ
document.getElementById は「触りたい要素を特定する」ための入口。
textContent は「その要素の中の文字を安全に読み書きする」ための基本プロパティ。
今回の練習問題で、
・要素の取得
・文字の読み取り
・文字の書き換え
・イベントと組み合わせた DOM 操作
・入力値の反映
・安全な textContent の使い方
といった DOM 操作の基礎がしっかり身につきました。