DOM」は、フロントエンドのWebデザイン・開発でよく使われる言葉です。Document Object Model」の略で、Webサイトの基本的な部分です。

DOMは重要であるにもかかわらず、多くの人が理解していない。実際、あまり知識がなくても、何年もWebサイトのプログラミングをすることができます。しかし、フロントエンド技術の進歩に伴い、DOMを理解することはますます重要になってきています。

ドム契約を理解する

オブジェクト指向プログラミングでは、インターフェースと呼ばれる仕組みがあります。インターフェースそのものは何もしない。その代わり、契約書を作成します。これは、インターフェース契約のルールに従う限り、どんなものでも他のものと相互作用することができるというものです。

インターフェースを持つことで、プログラムのどの部分でも、制御された予測可能な方法で、他の部分と相互作用することができます。また、インターフェースによって、プログラムの一部が、インターフェースのもう一方の端にあるプログラムの一部を知らなくても、他のどの部分とも連携して動作することができます。

インターフェースとは、壁にあるコンセントのようなものです。電圧が適切であれば、デバイスは電源がどこから来ているかを知る必要はありません。隅にあるトランスは、何に電力を供給しているのか知る必要はないのです。適切な電圧の電気を家に送ればいいのです。

DOM は、Web ページとそれを作成および変更するコードの間のインターフェイス層です。Webサイトにアクセスすると、ブラウザがそのWebサイトのDOMをどのようにレンダリングしているかを見ることができる。HTMLを書くとき、実際にはDOMのAPI（プログラミングインターフェイス）を使ってプログラミングをしていることになる。

DOM 規格は WorldWideWebC***ortium または W3C と呼ばれる組織が管理しており、DOM 規格を定義する非常に詳細なドキュメントを作成しています。

この時点で、あまり良い仕事をしていないと思われるかもしれません。何しろ、クロスブラウザの互換性の問題は、多くの問題を引き起こすのですから。

問題は、規格にあるのではありません。ブラウザ自体の問題です。多くのブラウザは、W3Cに準拠していないDOMの実装に機能を追加しています。そのような機能が普及してDOM標準に実装され、他のブラウザが追いつかざるを得なくなることもあります。

もう一つの問題は、最新のDOM規格が組み込まれていない古いバージョンのブラウザをまだ使っている人がいることです。ブラウザが規格を正しく実装していない場合もあります。

domの構造

DOMは木と考えることができます。html>要素が幹で、その中にあるすべての要素が枝です。親要素の中でHTML要素をネストさせると、実はそのブランチの外側にブランチを作っていることになります。各枝の正式名称は "ノード"

ツリー構造は、家系図のようにノード間に論理的な関係をつくります。各ノードは、その枝の親ノードおよび祖先ノードを持つことができます。兄弟がいてもいいんです。ノードは、子ノードとサブノードを持つことができます。JavaScriptやCSSを使ってDOMを操作する場合、このような観点で考えるのが効果的です。

htmlとdomの相互作用

DOMは、document interfaceを使ってドキュメントオブジェクトを作成することで定義されます。HTMLコードは、ドキュメントを作成する最も簡単な方法です。HTMLは、従来のプログラミングを必要とせずに、ドキュメントを簡単に定義する方法を提供します。

これからHTMLを始める方に、HTMLに親しんでいただくための5つのヒントをご紹介します。

HTMLは従来のプログラミング言語よりもシンプルで寛容であり、初心者のWebデザイナーでもDOMとのインタラクションを容易に行うことができます。

cssとdomの相互作用

HTML が DOM 文書を構築すると、CSS はその文書にスタイルを設定することができる。そのためには、必要なスタイル要素を見つけることができる必要があります。これは、いくつかの方法で実現されています。

文書ノードへのアクセスは、<div> や <p> などの要素名で行います。CSSでは、クラス名やID名で直接要素にアクセスすることも可能です。クラススタイルは複数の要素に適用されるため、すべての要素に同時にスタイルを設定することができます。一方、idスタイルは、単一の要素にのみ変更を適用します。

また、CSSを使って家系図構造にアクセスし、アクセスを細かく制御することもできます。 CSSセレクタを使うと、複数の要素を選択でき、それらを見つけるための袋小路が提供されます。先祖やクラスの組み合わせなどで子供を検索することができます。

javascriptとdomの相互作用

JavaScript はオブジェクト、フロー制御、変数などを含む実際のプログラミング言語であるため、ドキュメントを最もよく制御できます。DOM は JavaScript がドキュメント、要素、その他のノードを操作できるようにするいくつかのインタフェースを提供します。

関連：JavaScriptとは？

JavaScriptは、ノードの追加や削除、スタイルの変更を行うことができます。 JavaScriptは、要素の上にカーソルを置く、クリックする、キーを押すなど、文書内のイベントを監視することができます。

JavaScriptは、CSSと非常によく似た方法でドキュメントツリーを検索し、ナビゲートすることができます。idとclassで要素を探すことができる。子要素のリストを配列として取得することができる。

domによるWeb開発の未来

インターネットは、その黎明期から大きく変化しました。初期のJavaScriptは、主に特殊効果や簡単なデータ表示などに使われていました。ほとんどのウェブサイトは、電子パンフレットに過ぎなかった。しかし、AJAXはそれを一変させた。

AJAXは、Webサイトがページを再読み込みすることなく、サーバーに表示されているデータを動的に更新することを可能にします。AJAX以前は、データのすべての変更は、ページが再読み込みされたとき、またはユーザーが別のページに移動したときにのみ表示されました。

AJAXの登場により、Webアプリケーションの普及が進みました。インターネットはもはや、静的なウェブサイトとeBayのような少数の高機能アプリケーションの集合体ではなく、強力なアプリケーションに満ちた、ほとんど第二のオペレーティングシステムになっています。

JavaScriptは、最もパワフルで最も速い言語ではありません。また、浮動小数点数値のエラーなど、開発者が満足できない問題も抱えている。そこで登場するのがWebAssemblyです。

WebAssemblyは、スピードの向上やハードウェアへのアクセスの改善など、ネイティブコードの利点の多くをブラウザで実現します。これにより、プログラマーはC++やRISTなど他の言語を使ってサイトを構築することができるようになります。

しかし、WebAssemblyが大きな改善をもたらすとしても、DOMは依然として存在し、コードとブラウザに表示されるコンテンツの間に一貫したインターフェイスを提供します。