DOM（ドキュメント・オブジェクト・モデル）とは、一言で言うと「Webページ（HTML）をJavaScriptから操作できるように変換したもの」です。
ブラウザはHTMLを読み込むとき、上のような「木構造（ツリー）」に変換します。JavaScriptを使えば、この木の中の枝（要素）を自由に取り出して、書き換えたり、色を変えたり、新しい要素を追加したりできます。
1. HTML要素を「捕まえる」
JavaScriptから特定のHTML要素を操作するには、まずその要素を「指定」する必要があります。一番よく使われるのが document.getElementById() です。
HTML
<h1 id="title">こんにちは！</h1>
JavaScript
// JavaScript
const titleElement = document.getElementById("title");
2. 内容を「書き換える」
捕まえた要素の中身を変えるには、textContent を使います。
JavaScript
titleElement.textContent = "JavaScriptで変身しました！";
3. 見た目を「変える」
要素のスタイルを変えるには、style プロパティを使います。CSSの書き方とほとんど同じですが、プロパティ名は少し変わります（例：font-size は fontSize と書く）。
JavaScript
titleElement.style.color = "blue";
titleElement.style.fontSize = "30px";
4. ユーザーの行動に「反応する」
DOM操作の真骨頂は、クリックなどの操作に合わせて動くことです。これを「イベントリスナー」と言います。
JavaScript
const button = document.getElementById("myButton");
// ボタンがクリックされたら実行する処理
button.addEventListener("click", function() {
alert("ボタンが押されました！");
titleElement.textContent = "ボタンが押されましたね！";
});
5. 初級編のまとめと振り返り
これまでの5章で、プログラミングの基礎と、Webサイトを動かすための基本的な武器を揃えました。
| 章 | 学んだこと |
| 第1章 | JavaScriptの準備と実行方法 |
| 第2章 | 変数とデータ型（情報の箱） |
| 第3章 | 条件分岐と繰り返し（論理の組み立て） |
| 第4章 | 関数（処理の部品化） |
| 第5章 | DOM操作（Web画面への干渉） |
おめでとうございます！これで初級編は修了です！ 🎉
ここまでの知識があれば、簡単なクイズアプリや、クリックで動くWebサイトなど、すでに多くのものを作ることができます。
さて、ここからは「中級編」に突入します。中級編では、現場で使われるよりスマートでプロフェッショナルな書き方を学びます。