DOM BOM

window.console.log('hello world');

Windowsコントロールウィンドウ、documentコントロールドキュメント.
console.dir(window)と定義された情報を表示すると、ウィンドウオブジェクトにドキュメントが表示されます.
ただしwindowはhtml要素ではないのでgetElemtById、childrenなどの機能はありません.Windowsとdocumentオブジェクトでは、許容可能なeventListが異なります.
Windowsオブジェクトはブラウザタブに存在するJavaScriptグローバル最上位オブジェクトであるため、どこからでもアクセスできます.ただし、SSRであればwindowがないことに注意してください.
では、DOMとBOMについて詳しく見てみましょう.
DOM

Documentオブジェクトモデルでは、DocumentはHTMLを表します.しかしDOMはHTMLではありません.ブラウザが工場であれば、HTMLは注文です.この注文のWebページの要素と構造を設計図に示します.ブラウザはこの注文を受信し、bottonラベルを実際のボタンにします.
DOMは,HTMLコード設計のウェブページがブラウザでイベントに反応して入力値などの機能を受け入れるオブジェクトの実体であると考えられる.
JavaScriptでDOMを操作することもできます.次いで、DOMは、上述したツリー構造を有し、ノードからなる.
MDNでは、DOMはAPIとも呼ばれ、HTMLドキュメントまたはXMLドキュメントをエンティティとして表します.
CSSはまた、CSSOMと呼ばれるDOMによって個別に作成される.したがって,ブラウザはDOMツリーとCSSOMツリーを融合させ,我々が見た画面を生成する.

document.getElementById("id명")
document.quertSelector("선택자")
document.getElementsByClassName("class명")
document.getElementsByTagName("tag명")
document.quertSelectorAll("선택자")

このJS方式でDOMにアクセスできる.
DOMツリー構造のノードの9種類については、この文章を参照してください.
BOM
ブラウザ自体のAPI.
ブラウザオブジェクトモデルは、Webブラウザに関連するオブジェクトの集合です.対象モデルの種類はWindows(最上位)、location、navigator、history、screen、documentである.(DOMもBOMの一部に相当)
の最後の部分
DOMとBOMについて簡単に理解しました.バーチャルドームについてはreact記事で、見てもいいです.