【JS基礎-1】Webサイトの文字を自由に書き換えろ！「DOM操作」の基本

これまで、JavaScriptの「変数」や「if文」を勉強してきましたが、画面（ブラウザ）には何も変化がなくて少し退屈でしたよね？

今日から世界が変わります。
JavaScriptを使って、HTMLの文字を書き換えたり、色を変えたりする魔法を覚えます。

これを専門用語で「DOM操作（ドムそうさ）」と呼びます。
難しそうな名前ですが、やることはたったの2ステップです！

DOM（ドム）ってなに？
ステップ1：要素を「掴む」（querySelector）
1. 書き方
ステップ2：中身を「書き換える」（textContent）
1. 書き方
【応用】HTMLごと書き換える（innerHTML）
実践：ボタンを押さずに書き換えてみよう
まとめ
1. 📝 今日のミニテスト

DOM（ドム）ってなに？

DOMは Document Object Model の略ですが、覚えなくていいです。
簡単に言うと、「HTMLのタグたちを、JavaScriptから触れるようにした『ツリー状の地図』」のことです。

JavaScriptはこの地図（DOM）を使って、特定のタグを見つけ出し、中身を書き換えます。
まるで「UFOキャッチャー」のような作業です。

狙う： 欲しい景品（HTML要素）をアームで掴む。
動かす： 掴んだ景品の中身を書き換える。

ステップ1：要素を「掴む」（querySelector）

まずは、操作したいHTML要素をJavaScriptの世界に引っ張り込みます。
使うのは document.querySelector() という命令です。

書き方

// HTMLの <h1 id="title"> を探して、定数 title に入れる
const title = document.querySelector("#title");

querySelector のカッコの中には、CSSで使っていた「セレクタ」をそのまま書けます。

タグ名なら "h1"
ID名なら "#title"
クラス名なら ".text"

これで、定数 title の中に、あの <h1> タグが丸ごと入りました！

ステップ2：中身を「書き換える」（textContent）

掴んでしまえばこっちのものです。
中身の文字を書き換えるには、textContent（テキストコンテント）を使います。

書き方

// 掴んでおいた要素の文字を書き換える
title.textContent = "ようこそ！JavaScriptの世界へ";

これだけで、画面上の文字が一瞬で変わります。

【応用】HTMLごと書き換える（innerHTML）

ただの文字だけでなく、<strong> などのタグを含めて書き換えたい場合は、innerHTML（インナーエイチティーエムエル）を使います。

// タグを含めて書き込む
title.innerHTML = "ようこそ！<span style='color:red;'>JS</span>の世界へ";

textContent： タグを書いても、そのまま「文字」として表示される（安全）。
innerHTML： タグが有効になる（便利だが、使い方を間違えると危険）。

⚠️ プロの注意点：
innerHTML は便利ですが、ユーザーが入力した文章などをそのまま入れると、悪意あるプログラム（XSS攻撃）を実行される危険があります。
基本は textContent を使い、どうしてもタグが必要な時だけ innerHTML を使うようにしましょう。

実践：ボタンを押さずに書き換えてみよう

では、実際にコードを書いてみます。
このHTMLファイルをブラウザで開くと、一瞬で「書き換わりました！」という文字に変化するはずです。

<!DOCTYPE html>
<html lang="ja">
<body>

    <!-- 元のHTML -->
    <h1 id="my-title">元のタイトル</h1>
    <p class="desc">元の文章</p>

    <script>
        // 1. 要素を掴む（IDで探す）
        const titleElement = document.querySelector("#my-title");
        const textElement = document.querySelector(".desc");

        // 2. 文字を書き換える
        titleElement.textContent = "書き換わりました！";
        
        // 3. HTMLごと書き換える
        textElement.innerHTML = "ここは <b>太文字</b> です。";
        
        // おまけ：色も変えてみる（次回詳しくやります！）
        titleElement.style.color = "blue";
    </script>

</body>
</html>

まとめ

HTMLを操作することをDOM操作と言う。
要素を掴むなら document.querySelector("セレクタ")。
文字を変えるなら textContent = "..."。

これができれば、ユーザーの操作に合わせて画面を変える準備は完了です。
次回は「クリックしたら変わる」というイベント処理を学びます！

📝 今日のミニテスト

理解度を確認しましょう！答えはクリックで開きます。

Q1. id=”result” の要素を取得する正しいコードは？

正解：document.querySelector("#result")
CSSと同じように、IDには # をつけます。

Q2. HTMLタグ（<br>など）を有効にしたまま書き換えたい時に使うプロパティは？

正解：innerHTML
textContent だと、タグもただの文字として表示されてしまいます。

Q3. 実践問題：クラス名「box」の要素の中身を「Hello」に変えるコードを完成させてください。

const box = document.querySelector( ① );
box.② = "Hello";

// 答え
// ① ".box"
// ② textContent