Step 1: Web Basics

DOM操作入門：
JavaScriptで画面を操る

HTMLで作ったただの「静的な画面」を、どうやってJavaScriptで動かしているのか？フロントエンド開発の第一歩「DOM操作」を学んだ時の備忘録です。

Webページは「木（ツリー）」でできている

HTMLをただのテキストファイルだと思っていたのですが、ブラウザがこれを読み込むと、内部で「DOM（Document Object Model）」というツリー構造のデータに変換されるそうです。

JavaScriptの役割は、このDOMツリーの中にある特定の枝（要素）を見つけ出して、色を変えたり、文字を書き換えたりすることでした。

おまじない：getElementById

要素を見つけるための最も基本的な方法が、IDを指定して取得することです。「猫の手貸し」のコードでも、最初に画面のパーツを全部取得して変数（const）に入れています。

// HTML側: 写真をえらぶ

// JS側: IDを頼りに要素を捕まえて、変数に入れる
const dropZone = document.getElementById('drop-zone');

// 捕まえた要素を隠す（CSSのクラスを追加する）
dropZone.classList.add('hidden');

まるでサーバーにSSH接続する感覚

インフラエンジニアの自分としては、この document.getElementById は、ホスト名を指定して特定のサーバーにアクセスし、設定ファイルを書き換えるような感覚に似ているなと感じました。

「対象を特定する」→「操作する」。この基本を理解したことで、ブラウザという真っ白なキャンバスに自由に絵を描けるような感覚になり、開発が一気に楽しくなりました！