今回は社内で勉強会を開催するにあたって
DOMについて勉強したので、備忘録として残します。
操作方法ではなく、DOMという概念をざっくり知りたい方はぜひ読んでみてください！
DOMとは
DOM（Document Object Model）とはなんぞや？
Document Object Model(DOM)は、HTMLまたはXML文書のためのプログラミングAPI
ドキュメントの論理構造と、ドキュメントへのアクセスや操作の方法を定義している
簡単にいうと、
✅ 主にJavaScriptからHTMLドキュメント（又はXMLドキュメント）を操作するためのAPI
✅ APIをどのように実装するかの定義
この2つを指します。
DOMについて調べていて分かりづらいなと感じたのがこの部分で
定義（概念）と実装のやり方を共にDOMと呼ぶそうです。
🗒JavaScriptによる操作
前提として、DOMはいろんな言語での操作が可能です◎
実際にPHPやRubyにもDOM操作を可能にするライブラリがあります。
例：📌Simple HTML DOM（PHP）
しかし、DOMを実装する場所は主にWebブラウザであるため
JavaScriptでの実装がDOM操作において重要度が高いことになります＾＾
DOMツリー
以下のような表を構成するHTMLドキュメントがあったとします。
<TABLE>
<ROWS>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</ROWS>
</TABLE>
このHTMLドキュメントを図で表現したものが以下になります。
（画像、HTML共に📌DOM - 公式ドキュメントより）
上記の構造（図）をDOMツリーと呼びます。
こう見るとHTMLドキュメントは木を逆さまにしたような構造をしていますね＾＾
このような構造をしているため、実際にDOM操作では子要素を辿ることができます。
DOMを構成するもの
🗒Node（ノード）
Node はいくつもの DOM API オブジェクトタイプが継承しているインターフェイスで、それらのさまざまなタイプを同じように扱える (同じメソッドのセットを継承する、または同じ方法でテストできる) ようにします。
📌Node - MDN より
上記のDOMツリーの画像でいう<TABLE>や<ROWS>といった
1つ1つのツリーの要素をNodeと呼びます。
よく聞くもので言うと、Documentや次に紹介するElementもNodeのうちの1つです。
🗒Element（エレメント）
Element は Document の中にあるすべての要素が継承する、もっとも一般的な基底クラスです。
このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが Element を継承します。
📌Element - MDN より
上記のDOMツリーの画像でいう<TD>Aeolian</TD>のような
タグと中身の組み合わせをElementと呼びます。
よく耳にするものでいうとHTMLElementがありますが
これはHTMLの基本インターフェイスであり、親要素のNodeからプロパティを継承します。
DOMの弱点
ユーザーに触れるHTMLドキュメントの裏側には
DOMが複雑な要素や属性を持っているため、
一見シンプルに見える画面の裏側で、DOMは多くの処理を強いられています。
また、子要素を複数持つ親要素が変更された場合、
親要素全体を再構築し、全てのコンテンツを再レンダリングする必要があります。。。
従って、ドキュメントの規模が大きくなればなるほど
DOMの仕事量は増大し、それに伴ってパフォーマンス低下の原因となるわけです。
🗒仮想DOMの登場
こうした懸念点を考慮した仮想DOMが誕生します！
仮想 DOM (virtual DOM; VDOM) は、インメモリに保持された想像上のまたは「仮想の」UI 表現が、ReactDOM のようなライブラリによって「実際の」DOM と同期されるというプログラミング上の概念です。
仮想DOMとはVue.jsやReactといったJavaScriptライブラリによって
ブラウザ上に実装された概念を指します＾＾
仮想DOMの変更をリアルDOMと同期させ、その差分のみ反映させることができる
差分検出処理と呼ばれる特徴をもっています。
参考
何度かリンクを貼っていますが、DOMの公式ドキュメントです
📌Document Object Model
こちらの記事、大変わかりやすいうえに詳しすぎるところまで書いてあります！
神です、、、、
📌業務ができる中級者になるためのJavaScript入門（DOM編）
おわりに
今回はエンジニアとして知っておきたい
DOMに関する基礎知識を軽くまとめてみました！
自分のためにまとめたつもりですが、誰かの学習に少しでも役立てたら嬉しいです。