JavaScriptを学び始めると、
ほぼ必ず次の疑問にぶつかります。
・なぜJavaScriptでHTMLを書き換えられるのか
・クリックすると表示が変わる仕組みが分からない
・どこまでがHTMLで、どこからがJavaScriptなのか曖昧
この疑問を解消する鍵が、
DOM（Document Object Model） です。
DOMを理解せずにJavaScriptを進めると、
コードは「おまじない」になってしまいます。
この記事では、
DOMの正体と役割 を
概念レベルでしっかり整理します。
この記事で学べること
・DOMとは何か
・HTMLとDOMの関係
・JavaScriptがHTMLを操作できる理由
・DOM理解が重要な理由
DOMとは何か
DOMとは、
HTMLをJavaScriptから操作できる形に変換した仕組みです。
ブラウザは、
HTMLファイルをそのまま扱っているわけではありません。
HTMLを読み込むと、
内部で DOMという構造 を作ります。
JavaScriptは、
このDOMを操作しています。
HTMLとDOMは同じではない
ここは非常に重要なポイントです。
・HTML：ファイルとして書かれたコード
・DOM：ブラウザが内部で作った構造
JavaScriptは、
HTMLファイルそのものを直接書き換えているのではありません。
DOMを通して画面を操作している
という点を必ず押さえてください。
DOMは「木構造」で管理されている
DOMは、
ツリー（木構造） で表現されます。
・html が一番上
・その下に head や body
・さらにその中に要素が入る
親子関係を持った構造になっているため、
「どの要素の中にあるか」
という考え方が重要になります。
なぜDOMを理解する必要があるのか
DOMを理解していないと、
次のような状態になります。
・なぜこの要素が取得できないのか分からない
・クリックイベントが効かない
・表示が変わる理由を説明できない
DOMを理解すると、
・どの要素を操作しているか
・なぜその結果になるか
を 論理的に説明できる ようになります。
JavaScriptはDOMをどう見ているか
JavaScriptから見ると、
DOMは オブジェクトの集合 です。
・要素
・属性
・テキスト
これらがすべて
JavaScriptで扱える対象になります。
つまり、
「HTMLを操作している」のではなく、
DOMというデータ構造を操作している
という理解が正確です。
画面が変わる仕組み
JavaScriptでDOMを操作すると、
・テキストが変わる
・要素が表示・非表示になる
・スタイルが変わる
といった変化が起きます。
ブラウザは、
DOMの変更を検知して
画面を再描画します。
これが、
「JavaScriptで画面が変わる」正体です。
DOM操作の基本的な流れ
DOM操作は、
基本的に次の流れで行われます。
-
操作したい要素を見つける
-
その要素をJavaScriptで取得する
-
内容や状態を変更する
この流れは、
今後出てくるすべてのDOM操作で共通です。
「要素を取得する」が最初の壁
初心者が最初につまずくのが、
要素の取得 です。
・どの要素を対象にしているか
・classなのかidなのか
・複数あるのか1つだけか
これらはすべて、
DOM構造を意識しないと判断できません。
DOMとCSSの関係
DOMは、
CSSとも密接に関係しています。
・CSSはDOM要素に適用される
・JavaScriptはDOMを操作する
・結果として見た目が変わる
HTML / CSS / JavaScript は、
DOMを中心に連携している
と考えると理解しやすくなります。
DOMは一度理解すれば一生使う
DOMは、
・JavaScript基礎
・フレームワーク
・ライブラリ
すべての土台になる概念です。
React や Vue などのフレームワークも、
最終的には DOM 操作を抽象化しています。
ここで理解しておくと、
将来の学習が非常に楽になります。
初心者がよくある勘違い
よくある誤解を整理します。
・HTMLを直接書き換えていると思っている
・DOMとHTMLを同一視している
・構造を見ずに操作しようとする
DOMは、
「見えないけど確実に存在するもの」
として意識しましょう。
まとめ
DOMは、
JavaScriptがHTMLを操作するための仕組みです。
・HTMLはファイル
・DOMはブラウザ内の構造
・JavaScriptはDOMを操作する
この関係を理解できれば、
JavaScriptの動きは一気にクリアになります。
次は、
実際にDOMを取得して操作する方法
に進みます。
次に読むべき記事
▶ 次の記事
5-4 DOMの取得と操作の基本
▶ 関連記事
5-2 JavaScriptの基本文法
コメント