React 에서도 가상 DOM이란 개념이 나오는데, 정확히 무엇인지는 모르고 단순히 Tree 구조이다 이 수준으로 알고 있었다.

요즘 HTML, CSS, JS의 기본기를 다지고 있는데, 오늘 DOM이 무엇인지 알게 되었다.

DOM이란 무엇인가!

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects.

• MDM 출처 -

한마디로 HTML 파일에 있는 내용들이 DOM으로 변화된다고 볼 수 있다. HTML Tag 들은 JavaScript Node 들로 변환된다. 이 Node들의 조상으로는 EventTarget이 있고, Node들은 Documnet, Element 등 하위 요소로 변환된다. 이렇게 DOM-Tree가 형성된다.

DOM-TREE

우리는 이렇게 생성된 DOM을 통해서 Page 내의 DOM 요소들에게 접근이 가능하게 되며, 생성, 변경 추가 등 다양한 동작이 가능해진다.