DOMと仮想DOMについて

DOM?

DOM(Document Object Model)は、HTMLドキュメントを階層化してツリー構造を形成するモデルです
DOMはプログラミング言語でDOMにアクセスする方法を提供し、HTMLドキュメントの操作を支援します.

Node

複数のDOMタイプは継承インタフェースであるため,ノードの機能は同じである.
(firstChild、lastChild、parentNode...)
また、EventTargetを継承しているため、関連する機能も使用できます.
🚀 EventTarget
EventTargetは、イベントを受信し、イベントのリスナーを有するオブジェクト実装DOMインタフェースである.
ソース:MDN

DOMの使用

前述したように、JavaScriptでDOMを使用してHTMLドキュメントにアクセスできます

const button = document.querySelector('button');

上記のコードでHTMLドキュメントのbuttonをインポートできます

複数アクセス

上記では、querySelectorによってもたらされたものであるが、それ以外にも選択者に近づく方法がいくつかある.

getElementsByClassName:クラス経由アクセス

getElementById:IDでアクセス

getElementsByName:name属性の値でアクセス

querySelector:.name導入クラス#name銀id導入

querySelector All:上記と同様ですが、すべての要素を同時にインポート

そのうちgetElementsByClassNameHTML Collectionを返し、querySelectorAllNoteListを返します

仮想DOM？

仮想DOMはDOMの欠点を補うために作成された

DOMの欠点

開発者はDOMを使用してHTMLにアクセスし、変更し、これらのコンテンツをブラウザに反映し続けます.
この場合、各変更内容に一連の構造変更と再レンダリングプロセスが発生し、ページのパフォーマンスが低下します.

仮想DOMを使うと?

しかし、仮想DOMを使用すると、構造を変更してレンダリングする前に、仮想空間内の構造を確認し、最終的にはWeb上に実体化し、既存のDOMよりも優れたパフォーマンスを示すことができます.

仮想DOMを使用したフレームワーク

代表的なのはreact、Vue、Angular
Svelte
最近はバーチャルDOMを使わない開発が進んでいるそうですが、Svelteはフレームワークではなくコンパイラなので、この作業は可能です
しかしまだ始まっていないプログラムであるため、機能やコミュニティにおいても上記のREACT、VUEに比べて良くないという欠点がある.
しかし、時間が経つにつれて、より多くの立脚地があれば、フロントエンド開発者として魅力的なプログラムになると思います.
終了~