DOMツリー
前のセクションで DOM（ドム）ツリー について、少しだけ触れました。しかし、その中には、「ブラウザに表示されているHTML（ウェブページの中身） すべて」が含まれています。とてもたくさんの種類のオブジェクトが含まれます。
そのため、ここで新たなセクションを作って、もっと詳しく解説します。
I. DOMとは？
1. DOMツリーってなに？
DOMは Document Object Model の略です。 ブラウザはHTMLファイルを読み込むと、それをそのまま表示するのではなく、まず扱いやすいように 「枝分かれした木（Tree）」 の形に並べかえます。これがDOMツリーです。
DOM node tree“ by Yuho.K is licensed under CC BY-SA 4.0. This file is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
2. ツリーの「呼び名」と「関係」
DOMツリーを理解するコツは、**「家族（かぞく）」**の名前に例えて覚えることです。
- Document（ルート）： 木の「根っこ」です。一番上にあります。
- Parent（親）： ある要素の、すぐ上にある要素。
- Child（子）： ある要素の、すぐ中（下）にある要素。
- Sibling（兄弟）： 同じ親から生まれた、横に並んでいる要素。
例：
<ul>（親）の中に、3つの<li>（子）があるとき、3つの<li>同士は「兄弟」になります。
3. なぜ「ツリー」にするの？
なぜわざわざ「木」の形にするのでしょうか？ それは、JavaScriptという「魔法使い」が、特定のパーツをすぐに見つけやすくするためです。
- 「一番上の親を赤くして！」
- 「2番目の兄弟を消して！」
- 「この子の隣（となり）に、新しい子を追加して！」
このように、ツリーの枝をたどるように命令ができるので、非常に便利なのです。
4. DOM操作（そうさ）のイメージ
留学生には、DOM操作を 「木になっているリンゴ（要素）を、もぎ取ったり、別の場所に植え替えたりする作業」 だと伝えてください。
- 見つける（Select）：
querySelectorなどを使って、目的の枝まで行く。 - 変える（Change）：
styleやtextContentで色や文字を変える。 - 追加・削除（Update）：
appendChildで新しい枝を付けたり、removeで枝を切ったりする。
5. 留学生へのアドバイス
「HTMLファイルはただの『文字の集まり（テキスト）』だけど、ブラウザがそれを DOMツリーという『生きている木』 に変えてくれるんだ。 JavaScriptはこの木を自由に育てるための道具だよ。木の関係（親・子・兄弟）が分かれば、どんな複雑なページも自由に操（あやつ）れるようになるよ！」
まとめテーブル
| 専門用語 | 意味 | 家族で例えると？ |
|---|---|---|
| Document | ツリー全体の入り口 | ご先祖（せんぞ）様 |
| Element | <div> や <p> などの要素 | 家族の一人ひとり |
| Parent Node | すぐ上の要素 | お父さん・お母さん |
| Child Node | すぐ下の要素 | 息子・娘 |
| Sibling | 同じ階層にある要素 | 兄・妹 |
いかがでしょうか？「木の関係図」というイメージが持てれば、DOM操作はぐっと簡単になります。
II. Formオブジェクト
ウェブサイトで自分の名前を入力したり、アンケートに答えたりするときに使うのが「フォーム（お問い合わせ、ログイン画面など）」です。
JavaScriptでは、これらを Formオブジェクト として扱います。留学生の方には、Formオブジェクトは**「役所の窓口（まどぐち）」**だと教えてあげてください。
1. Formオブジェクトとは？
HTMLの <form> タグで囲まれた部分のことです。ユーザーが入力したデータをまとめて管理し、サーバー（裏側のコンピュータ）へ送る準備をする役割（やくわり）を持っています。
JavaScriptでは、主に以下の2つの方法でフォームを捕まえ（アクセスし）ます。
document.forms[0]（ページにある1番目のフォーム）document.getElementById("myForm")（ID名で指定）
2. よく使うプロパティ（フォームの情報）
窓口（フォーム）が持っている設定情報です。
nameフォームの名前です。複数のフォームがあるときに区別するために使います。actionデータをどこ（どのURL）に送るかという「宛先（あてさき）」です。methodデータの送り方です。主にGET（URLにのせる）かPOST（封筒に入れる）のどちらかです。elementsフォームの中にあるボタンや入力欄（入力パーツ）を、配列のような形でまとめて持っています。
3. よく使うメソッド（フォームを動かす）
submit()「送信（そうしん）ボタン」を押さなくても、JavaScriptから強制的にデータを送ります。reset()入力した内容をすべて消して、最初の状態（空っぽ）に戻します。
4. フォームの中の「入力パーツ」の操作
留学生が一番やりたいのは、**「ユーザーが書いた文字を読み取ること」**です。これは、各パーツの value（バリュー） プロパティを使います。
// 1. フォーム全体を取得（しゅとく）
const myForm = document.forms["loginForm"];
// 2. ユーザーが書いた「ユーザー名」を取り出す
const userName = myForm.elements["uName"].value;
// 3. 送信（そうしん）する前にチェックする
if (userName === "") {
alert("名前を書いてください！");
} else {
myForm.submit(); // 問題なければ送信（そうしん）！
}
5. 留学生への説明ポイント：onsubmit イベント
データを送る瞬間に「ちょっと待って！今の入力、間違っていない？」とチェックする機能がよく使われます。
「
onsubmitは、窓口で書類（しょるい）を渡す前の『最終チェック』だよ。もし書き忘れがあったらreturn falseと言って、送信をストップさせるんだよ」
myForm.onsubmit = function() {
if (this.elements["email"].value === "") {
alert("メールアドレスが必要です！");
return false; // 送信（そうしん）を中止（キャンセル）する
}
return true; // 送信（そうしん）する
};
まとめテーブル
| プロパティ・メソッド | 役割 | 例え話 |
|---|---|---|
elements | 全パーツのリスト | 窓口にある書類の束（たば） |
value | 入力された文字 | 書類に書かれた内容 |
submit() | 送信する | 書類を受け付けて送る |
reset() | リセットする | 書類をゴミ箱に捨てて新しくする |
Tip
「id」と「name」の使い分け 留学生には、「JavaScriptでデザインを変えるときは
id、サーバーにデータを送るときはnameを使うのが一般的だよ」 と教えてあげると、混乱が少なくなります。
いかがでしょうか？「窓口」と「書類」のイメージで、フォームの操作もバッチリですね。
次は、チェックボックスやラジオボタンなど、文字入力以外のパーツを操作する方法についても練習してみますか？
III. Elementオブジェクト
前回の document が「現場監督（げんばかんとく）」なら、今回の Element オブジェクトは、現場にある**「レンガや窓、ドアといったひとつひとつの『部品（パーツ）』」**のことです。
HTMLタグ（<div>, <h1>, <a> など）が、JavaScriptの世界で「Elementオブジェクト」と呼ばれます。
1. Elementオブジェクトとは？
ウェブページを構成する「ひとつひとつの要素」です。
document.getElementById() などで見つけてきたものは、すべてこのElementオブジェクトになります。これを使うことで、特定のパーツだけの色を変えたり、文字を書き換えたりできます。
2. よく使うプロパティ（パーツの状態）
そのパーツがどんな状態（じょうたい）かを知るためのプロパティです。
**id / className**
HTMLの id や class の名前です。
- 注意： JavaScriptでは
classは予約語（特別な言葉）なので、プロパティ名はclassNameと書きます。
**innerHTML / textContent**
パーツの中身（文字やタグ）です。
textContent：中の「文字」だけを扱います。（安全でおすすめ！）innerHTML：中の「HTMLタグ」も含めて扱います。
style
見た目（CSS）を直接いじります。
- 例：
element.style.color = "blue";
attributes
そのタグについている「属性お話」のリストです。
3. よく使うメソッド（パーツへの操作）
パーツに対して「何かをする」ための命令です。
属性（じょうほう）を操作する
getAttribute("<ruby>属性<rt>ぞくせい</rt></ruby>名")：設定されている値（srcやhrefなど）を読み取ります。setAttribute("<ruby>属性<rt>ぞくせい</rt></ruby>名", "値")：新しく値をセットします。removeAttribute("<ruby>属性<rt>ぞくせい</rt></ruby>名")：設定を消します。
クラスを操作する（とても便利！）
classList.add("クラス名")：クラスを追加する。classList.remove("クラス名")：クラスを消す。classList.toggle("クラス名")：あれば消す、なければ追加する。
パーツを動かす
remove()：そのパーツを画面から消します。
4. 実際に動かしてみよう！
留学生に「画像を切り替えるボタン」の仕組みを説明するコード例です。
// 1. <img>タグ（Elementオブジェクト）を見つける
const myImage = document.querySelector("#profile-pic");
// 2. setAttribute で画像（がぞう）のURLを変える
myImage.setAttribute("src", "new-image.jpg");
// 3. classList でデザインを切（きり）り替（か）える
myImage.classList.add("rounded-frame");
5. 留学生へのアドバイス：innerHTML の注意点
留学生がよくやってしまう「危ない書き方」について、一言教えてあげてください。
「
innerHTMLは便利だけど、ユーザーが入力した文字をそのまま入れると、悪いプログラム（ウイルスなど）が動かされる危険があるんだ。 ただの文字を表示したいときは、必ずtextContentを使おうね！」
まとめテーブル
| プロパティ・メソッド | 役割 | 例え話 |
|---|---|---|
id | ID名 | パーツの「名前ラベル」 |
style | CSSデザイン | パーツの「服の色やサイズ」 |
textContent | 中のテキスト | パーツに書いてある「看板の文字」 |
setAttribute() | 設定を変える | 窓を「開ける」か「閉める」か設定する |
classList | クラスの管理 | パーツに「タグ（目印）」を貼ったり剥がしたりする |
いかがでしょうか？Elementオブジェクトを使いこなせれば、ユーザーの動きに合わせて画面を動的に変える「動くサイト」が作れるようになります！
IV. DOMツリーを使ったエレメントの取得
DOMツリーの「家族（親子・兄弟）」の関係がわかったら、次は実際に**「その枝（え要素）をたどって、操作する方法」**を学びましょう！
留学生の方には、**「住所を知らなくても、家系図をたどれば目的の人に会える」**というイメージで説明するとわかりやすくなります。
1. 要素の関係（プロパティ）を使ってたどる
IDやクラス名を使わなくても、今いる場所から「隣の人」や「親」を指名できます。
parentNode（親）： 自分のすぐ上の要素。children（子）： 自分のなかにいる要素たちのリスト。previousElementSibling（前の兄弟）： 自分のすぐ上（前）にある同じレベルの要素。nextElementSibling（次の兄弟）： 自分のすぐ下（後）にある同じレベルの要素。
2. 実際にたどって操作するコード
例えば、リスト（<ul>）の中の「2番目の項目」からスタートして、周りを操作してみましょう。
// 1. まず、真ん中（まんなか）の「2番目」を捕まえる
const centerItem = document.getElementById("item2");
// 2. 「親」の背景（はいけい）色を変える（リスト全体がオレンジに！）
centerItem.parentNode.style.backgroundColor = "orange";
// 3. 「前の兄弟（1番目）」の文字を大きくする
centerItem.previousElementSibling.style.fontSize = "25px";
// 4. 「次の兄弟（3番目）」を消してしまう
centerItem.nextElementSibling.remove();
3. 要素を「追加」する（新しい枝を増やす）
DOMツリーに新しい要素を加えるときは、**「部品を作って、親に渡す」**という2ステップが必要です。
document.createElement("タグ名")： 新しい要素をメモリの中に作ります（まだ画面には出ません）。親要素.appendChild(新しい要素)： 親の「最後の子」としてツリーに追加します。
// ① 新しい <li> を作る
const newLi = document.createElement("li");
newLi.textContent = "新しい家族です！";
// ② <ul> を見つけて、その中に入れる
const list = document.querySelector("ul");
list.appendChild(newLi);
4. 留学生へのアドバイス：Elementを忘れないで！
ここでよくある間違いを教えてあげてください。
「
nextSibling（兄弟）」と「nextElementSibling（要素の兄弟）」は似ているけど違うんだ。nextSiblingは、目に見えない『改行（かいぎょう）』や『スペース』も1つの枝として数えてしまうことがある。 「HTMLタグだけをたどりたいときは、名前に『Element』が入っている方を使おうね！」
まとめテーブル：たどるための魔法
| 魔法の言葉 | 行き先 |
|---|---|
parentElement | お父さん・お母さんのところへ |
firstElementChild | 長男・長女のところへ |
lastElementChild | 末っ子のところへ |
nextElementSibling | 弟・妹のところへ |
previousElementSibling | 兄・姉のところへ |
いかがでしょうか？「今いる場所」を基準にツリーを移動できるようになると、まるで迷路を攻略するように自由にHTMLを操作できるようになります。
V. 要素の生成・追加・削除
DOMツリーの操作の中でも、**「新しく作る（生成）」「仲間に入れる（追加）」「さよならする（削除）」**の3つは、もっともワクワクする部分です。
留学生の方には、**「レゴブロックで新しいパーツを作って、組み立てたり外したりする遊び」**と同じだと教えてあげてください。
1. 要素を「作る（生成）」
まずは、魔法を使って何もないところにパーツを誕生させます。
document.createElement("タグ名")指定したタグ（div,li,pなど）を新しく作ります。
注意： この時点では、まだ「メモリの中」にあるだけで、画面には見えません。
// 「たこ焼き（li）」というパーツを1つ作る
const takoyaki = document.createElement("li");
// 中身の文字を入れる
takoyaki.textContent = "たこ焼き 🐙";
2. 要素を「入れる（追加）」
作ったパーツを、DOMツリーのどこに置くかを決めます。
appendChild(新しい要素)
親要素の**「一番最後の子」**として追加します。一番よく使います。
const list = document.getElementById("food-list");
list.appendChild(takoyaki); // リストの最後にたこ焼きが登場！
insertBefore(新しい要素, 目印にする要素)
「一番最後じゃなくて、この要素の前に入れたい！」というときに使います。
3. 要素を「消す（削除）」
いらなくなったパーツをツリーから取り除きます。
要素.remove()
その要素を自分自身で消去します。とても簡単です！
const badApple = document.getElementById("rotten");
badApple.remove(); // 画面（がめん）から消える
親要素.removeChild(子要素)
昔からある方法で、「親が子を取り除く」という書き方です。
4. 実際に動かしてみよう！
留学生に「ToDoリストに項目を追加して、クリックしたら消える」という魔法のような体験をさせてあげましょう。
function addNote() {
// 1. 生成：新しい <li> を作る
const item = document.createElement("li");
item.textContent = "勉強する 📖";
// 2. 追加：リストの中に入れる
const todoList = document.querySelector("#todo");
todoList.appendChild(item);
// 3. 削除の準備：クリックされたら消えるようにする
item.onclick = function() {
this.remove();
};
}
5. 留学生へのアドバイス
「要素を作ったら、**『テキスト（textContent）』や『色（style）』をセットして、最後に『親（appendChild）』**に渡す。この 『作る → 飾る → 貼る』 の3ステップが基本だよ！」
まとめテーブル
| 操作 | 使う魔法（メソッド） | イメージ |
|---|---|---|
| 生成（作る） | createElement() | レゴの新しいピースを用意する |
| 追加（最後へ） | appendChild() | 列の最後尾に並ばせる |
| 追加（割り込み） | insertBefore() | 「お先に失礼！」と間に入る |
| 削除（消す） | remove() | 舞台（ぶたい）から退場する |
いかがでしょうか？「生成・追加・削除」ができるようになると、ユーザーがボタンを押すたびに画面がどんどん変わる、本格的なアプリが作れるようになります。