Zenn
🌊

🌟 小学生でもわかる！ワンピースで学ぶJavaScriptのDOM操作（完全保存版）

に公開
JavaScript
DOM
小学生
ワンピース
中学生
idea

🌟 小学生でもわかる！ワンピースで学ぶJavaScriptのDOM操作（完全保存版）

📖 DOMとは？

DOM（ドム）とは、HTMLで作ったページをJavaScriptで動かすためのしくみのことです。
たとえば「ルフィの名前をゾロに変える」「画像を変える」「ボタンを押したら動く」など、全部DOMのおかげ！

🧰 ファイル構成

  • index.html：ページの設計図（絵やボタンを置く）
  • style.css：ページの見た目（色や形）
  • main.js：魔法のコード（ボタンを押したらキャラが変わる！）

🖥 index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ONE PIECEキャラ図鑑</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>ONE PIECE キャラ図鑑</h1>

  <div id="character" class="card">
    <h2 id="charName">ルフィ</h2>
    <img id="charImg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Y7rgTcW5NdDkxvwMW4Gdj2Q3G3lZVBvHHC10A3T_Iwxj0257NbTbdhvWKFOqn7nxXw6-V4P_0VFuJZ_5cQSDPxlazFKTD9N-d1A0IrX0k7LoaVpG3X9IwQ48H0zfXTJOT1JntRr0Lq3o/s1048/onepiece01_luffy.png" alt="ルフィ">
  </div>

  <button onclick="changeToZoro()">ゾロに変身！</button>

  <script src="main.js"></script>
</body>
</html>

🎨 style.css

body {
  font-family: sans-serif;
  background: linear-gradient(to bottom, #d0f0ff, #fff);
  text-align: center;
  padding: 40px;
}

.card {
  background: white;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  display: inline-block;
}

img {
  width: 200px;
  border-radius: 12px;
}

button {
  padding: 10px 20px;
  font-size: 18px;
  margin-top: 20px;
  background-color: #00c3ff;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background-color: #009acc;
}

⚙ main.js

// 🔁 ボタンを押したときにゾロに変身する関数を作ります
function changeToZoro() {

  // ▼ 「document」は今表示されているページ全体のことです。
  // ▼ 「getElementById」は、ページの中から特定のIDを持った部分を探す命令です。
  // ▼ この行は、IDが「charName」の部分（<h2>の中の名前）を見つけて、「ゾロ」という文字に書きかえています。
  document.getElementById("charName").textContent = "ゾロ";

  // ▼ 次の行では、IDが「charImg」の画像を見つけて、src（ソース）をゾロの画像URLに変えています。
  // ▼ 「.src」は画像ファイルの場所（URL）を指定するプロパティです。
  document.getElementById("charImg").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZ57Udi7AA5MRw4uzcx9M4R0J8PK03fIjZaaRlCLWBW5gBtnZpuCWLbao925kYGJy0HNcxEf9NcfbHFyuraKrY-4WhkFV01Ufut5cDeRpuiZ5cewk8CCQUD2v178dm67n_DqoHUrr_s-K/s1041/onepiece02_zoro_bandana.png";

  // ▼ 「.alt」は画像が表示されないときに代わりに出す説明文を決めるものです。
  // ▼ この行では、alt属性を「ゾロ」に変更しています。
  document.getElementById("charImg").alt = "ゾロ";
}

// 🔻 この部分では、ページを下にスクロールしたときの動きを設定しています。
// ▼ 「window」は画面全体（ブラウザ）を表します。
// ▼ 「addEventListener」は、「〜が起きたら〇〇をする」という命令です。
// ▼ 今回は "scroll"（スクロール）という動きが起きたら、中の関数（function）を実行します。
window.addEventListener("scroll", () => {

  // ▼ スクロールされたら、名前を「サンジ」に変えます
  document.getElementById("charName").textContent = "サンジ";

  // ▼ サンジの画像に変えます（.srcで画像を差し替え）
  document.getElementById("charImg").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb915nunoRAuBcf2adDTT6Fr8_1ZDE01Ub0VKqNROZTAF-6hAt_f-1MZZxBfa3-OOIbxPvP3-3d3hBJdofYgYtysdgEZHVVkOEORkGoHxeYiU75aESvdKnxIuzZCr4RsjHe2SoUMfS3PEo/s1028/onepiece05_sanji.png";

  // ▼ alt属性（画像が表示されない時の文字）も「サンジ」に変えます
  document.getElementById("charImg").alt = "サンジ";
});

📌 各メソッドやプロパティについて

用語 説明
document 表示されているWebページ全体を意味します
getElementById 指定したIDの要素を1つ見つけます
textContent テキスト（文字）の中身を変更できます
src 画像などのファイルの場所（URL）を指定します
alt 画像が表示されない時の代わりの説明文です
addEventListener 特定の動き（クリック、スクロールなど）があったら何かを実行する命令です
scroll ページが下に動いたときの動作を感知するキーワードです

🧪 DOM操作でしていること（5つ）

  1. 文字を変える： .textContent は文字の中身を変える
  2. 画像を変える： .src は表示する画像を差し替える
  3. ボタンで動かす： onclick を使えばボタンで関数を動かせる
  4. スクロールで動かす： addEventListener("scroll") でページの動きを感知
  5. altテキストを変える： .alt は画像が見えないときに表示される説明文

🏁 おわりに

ここまでで、JavaScriptを使ってワンピースのキャラを自由に変える魔法（DOM操作）を覚えました。
画像・文字・動作、全部自分の好きなようにコントロールできるんだよ！

👒 さあ、キミもナミやチョッパー、ロビン、ブルックなど追加して、
自分だけの「麦わらの一味図鑑」を作ってみよう！

引用：いらすとやhttps://www.irasutoya.com/2021/01/onepiece.html

ナミ：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtRfZsghuLTIyRzywbowxR_q3dtXJn33kub2lS7_pDSVeNlHKveWnsHjGOikcQlg6pgZT63i43SgAcJosU2mES_ZKK-f6G9qWvDViXOtBiDRMEDjQJOGghw-ZSUFYXZ1P01l5ZN0gkANI-/s1055/onepiece03_nami.png
チョッパー：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwXhPLNdUe6H1e8X7CvW3edgE1BqK7sNHFIbSLw9Y9sOzNrJFJig-sz9B2IRqsgYWXl-TKRpL99sggcD2qfcN82T5-MxZKdQtMDnjDF7luEIzsB9J41XFUMIN4SUzmCjXwMyuYh1dCkqn0/s992/onepiece06_chopper.png
ウソップ：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtPsAfN0IE2qpCnMIXr9CPKgJkLqiVE0VLh74Ohler_hT4-mosvVlNOraDvmLAJVz65EXKbODKXTheOL1o-IbEBWbZGvuWsxCbMpJeM7u6XbehkLDP8r21lAGu2Q3ZS_5lg0-nO09mxZJ1/s1025/onepiece04_usopp_sogeking.png
ブルック：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicPjQ7rvpZ7J4AdwOQLeidTouchG8itU6LzqT3nrNqBLdajXOB2MiFyWoVqYOnLx4ZGLqIKyejQ3kb0t0C_lU6buhcyJ6_svhzZl-NuaEcSUBR2XCj4xbZbZxg-nYWEVhIe8BEBOyrqpS-/s1102/onepiece09_brook.png
ロビン：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb_FkfaAWLeM3alcb5YOVmXPC2jsBEuuTQ8mplw5B-cnvd8LlExSr_3u7ybNGyT2TRzckrJSLOaY88DIuP6PVCCXxnMCY-a8b1SurHeEhWijrpmRnRpCWV6bw9LRiQghkECdemI4l2oebS/s1151/onepiece07_robin.png
エネル：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTBUDIYA3NqI3GndowHTh-oZf4TAm99PEgmUl09jar-wkO4DPM9FX8sPOQeH5VN7uBKmG8qpkaNiS4NDZlBCLiyoGsTS8TUuw36gMtMcA0kF83EY7tIyS3yqAegpe9yv1YEqXV0bINz0WX/s1156/onepiece14_enel.png
クロコダイル：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5cRnvUOeieTiPUR6Cfe2ZOuJVsRx7K91hyPPVPSfedJQ8A1yrtHq8izGtnYRREwl9TOV_ekM6llbX5bOpyfcprmxH4R1kPaIYKl5zVIehFyhZhtsuzqRaoaVsA_WCbJyTacoUQubXQJs/s1307/onepiece13_crocodile.png

Discussion